css - 在 div 或其 <ul> 中居中 float 列表项 <li>

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;
    }

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

    .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 的 hack。然而，这不是有效的 CSS 属性，因此不会通过 W3C 验证器。