центрирующие элементы в div

Question

Мне нужно центрировать все элементы в div.to_left_60. Мне нужно решение, которое будет работать для всех элементов внутри. Я установил text-align: center для этой цели. Он работает для текста, но не для моего элемента ul. Я попытался сыграть с полями и absolute/relative, но не повезло.

ul.problem - это элемент, который я должен центрировать в этом div. Из jsfiddle вы видите, что белый фон не центрирован.

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: (гуманного)

Это помогает:

ul.problem li{margin:0 auto;} 

Я модифицировал этот гуманного:

.to_left_60 * { 
    margin:0 auto; 
} 

Answer 1

попробовать этот путь

ul.problem li{margin:0 auto;} 

Demo

Answer 2

Посмотрите на это - http://jsfiddle.net/2y7R8/

Все, что я сделал была установлена ​​ширина на ul и добавлена ​​margin: 0 auto, чтобы центрировать ее.

Answer 3

Попробуйте Box выравнивать

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 и Chrome */

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

/* W3C */

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

Answer 4

Попробуйте удалить

ul 
{ 
    text-align: justify; 
} 

т.е.

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

Answer 5

Попробуйте

ul.problem li { 
margin:0 auto; 
} 

Это можно установить блок в щ центре. Он делает равную маржу с обеих сторон.

Answer 6

Вы можете объявить ul { padding:0; } Похоже, что ваши li центрированы, но родительский ul имеет заполнение по умолчанию.