Горизонтальный центр элемента, который находится внутри абсолютного div?

Question

У меня есть контейнер div - он должен быть абсолютным.

Внутри есть список - это должно быть расположено внизу и выровнено по центру. У меня проблемы с выравниванием центра.

Fiddle

Мне нужно решение, которое будет работать с IE9 так не прогибается коробки. Как контейнер, так и ul должны оставаться абсолютно неподвижными.

<div class="container"> 
<ul> 
    <li> 
     <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" /> 
    </li> 
    <li> 
     <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" /> 
    </li> 
    <li> 
     <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" /> 
    </li> 
    <li> 
     <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" /> 
    </li> 
</ul> 
</div> 


.container{ 
width: 100%; 
height: 100%; 
background: grey; 
position: absolute; 
} 

ul{ 
list-style-type: none; 
margin: 0; 
padding: 0; 
position: absolute; 
bottom: 0; 
} 
li{ 
display: block; 
width: 10%; 
float: left; 
padding: 0; 

} 
img{ 
max-width: 100%; 
} 

Answer 1

не уверен, почему вы делаете то, что вы делаете в данный момент, но в любом случае у каждого есть потребность и некоторые делают это странным образом, так вот фикс для решения

ul{ 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    position: absolute; 
    bottom: 0; 
    outline: 1px solid #f00; 
    text-align: center; 
    font-size: 0; 
} 
li{ 
    display: inline-block; 
    width: 10%; 
} 

Demo

так вот, что я делаю это, я удалил float из li и назначен display: inline-block;, так что я могу привести их к центру в ul.

отметить также, что я использовал font-size: 0; на ul элемента, так что вы не получите белое пространство проблемы при использовании inline-block для li элементов. Поэтому, если вы планируете разложить текст в li, тогда определите размер шрифта явно для элементов li.

Кончик, никогда не используйте float: left; и display: block; вместе, если вы float: left; то display: block; не требуется больше.