水平中心的一個元素，這是一個絕對的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

所以在這裏我是什麼做的是，我從li刪除float和分配display: inline-block;，這樣我可以將它們對齊到中心ul。

另外請注意，我用font-size: 0;ul元素，這樣在使用inline-block您li元素，你沒有得到的白色空間的問題。因此，如果您有任何一天計劃在li之間嵌套文本，請爲li元素明確定義一些字體大小。

一個提示，從來沒有使用float: left;和display: block;在一起，如果你float: left;然後display: block;不再需要。