水平中心的一个元素，这是一个绝对的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;不再需要。