将div中的浮动列表项<li>居中或其<ul>

Question

HTML:

<div class="imgcontainer">
    <ul>
            <li><img src="1.jpg" alt="" /></li>
            <li><img src="2.jpg" alt="" /></li>
            .....
    </ul>
</div>  

我通过创建无序列表编写一个简单的图库页面,它的每个列表项都包含一个图像.

    ul li {
        float: left;
    }

我将容器的宽度设置为"max-width",这样我就可以使列表项(图像)适合浏览器宽度..这意味着当浏览器窗口重新调整大小时,它们将被重新排列.

    .imgcontainer{
        max-width: 750px;
    }

现在问题是那些图像或列表项没有对齐到中心,它们对齐到.imgcontainer体的左侧(在下面的附加链接中为灰色),当窗口重新调整大小时在右侧留下空格!

每次窗口调整大小时,如何将这些图像居中？

这是您可以在JS Bin上预览或编辑的整个页面/代码

http://jsbin.com/etiso5

Answer 1

删除float:left并使用,display:inline以便您可以使用text-align:center.将字体大小设置为零,以便在图像之间没有空白区域.

ul {
    font-size:0;
    text-align:center
}
ul li {
    display:inline;
    zoom:1
}
.imgcontainer {
    max-width:750px;
    margin:0 auto
}

这zoom是旧IE版本的黑客攻击.但这不是有效的CSS属性,因此不会通过W3C验证器.