CODEWITHSUNDEEP
htmlcss
renathy
renathy

Reputation: 5355

centering elements in div

I have to center all elements in div.to_left_60. I need solution that will work for all elements inside there. I have set text-align: center for this purpose. It works for text, but not for my ul element. I have tried to play with margins and absolute/relative, but no luck.

ul.problem is the element I have to center in this div. From jsfiddle you see that white background is not centered.

HTML

<div class="to_left_40">gtestsetes</div>
<div class="to_left_60">
    <p>gtestsetes</p>
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTvZsT7cLwPFCC0joFhZoi6OylhGaIVHBPYn--PrH3nzZdMwH0grA" width="265px" />
    <ul class="problem">
        <li>fsfsd</li>
        <li>fsfsd</li>
    </ul>
    <ul>
        <li>fsfsd</li>
        <li>fsfsd</li>
    </ul>

CSS

ul {
    list-style: none;
    text-align: justify;
    background-color: yellow;
}
ul.problem li {
    list-style-type: none;
    display: block;
    width: 245px;
    height: 164px;
    padding: 14px 10px 0 10px;
    background-color: white;
    background-repeat: no-repeat;
    text-align: center;
    font-size: 18px;
}
.to_left_40 {
    float: left;
    width: 40%;
    background-color: red;
}
.to_left_60 {
    float: left;
    width: 60%;
    background-color: green;
    text-align: center;
}

JSFiddle: http://jsfiddle.net/qVTQ4/

EDIT: (SOLLUTION)

This helps: 

ul.problem li{margin:0 auto;}

I have modified this sollution:

.to_left_60 * {
    margin:0 auto;
}

Upvotes: 1

Views: 179

Answers (6)

Sergiy T.
Sergiy T.

Reputation: 1453

You can declare ul { padding:0; } Looks like your li's are centered but parent ul has default padding.

Upvotes: 0

Ankit Jain
Ankit Jain

Reputation: 1286

Try this 

ul.problem li {
margin:0 auto;
}

This can set ui block in center. It make equal margin from both sides.

Upvotes: 0

Arun Bertil
Arun Bertil

Reputation: 4638

Try removing 

ul
{
  text-align: justify;
}

i.e

ul {
    list-style: none;
    background-color: yellow;
}

Upvotes: 0

matthiasgh
matthiasgh

Reputation: 321

Try Box-align

div
{
width:350px;
height:100px;
border:1px solid black;

/* Internet Explorer 10 */

 display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */

display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */

display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */

display:box;
box-pack:center;
box-align:center;
}

Upvotes: 0

boz
boz

Reputation: 4908

Have a look at this - http://jsfiddle.net/2y7R8/

All I did was set a width on the ul and add margin: 0 auto to center it.

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

try this way 

ul.problem li{margin:0 auto;}

Demo

Upvotes: 7

Related Questions