css – 定位浮动列表项>在div或他们的内部

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

解决方法

删除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
}

缩放是旧版IE的黑客。但这不是一个有效的CSS属性，所以不会通过W3C验证器。

原文地址：https://www.jb51.cc/css/218204.html