Question

我有一个容器div - 这必须是绝对定位的。

在一个列表中 - 这需要位于底部并对齐中心。我在调整中心方面遇到了问题。

我需要一个可以与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;。

水平中心是一个绝对div内的元素？

1 个答案: