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主体的左边对齐(在下面的附加链接中为灰色),当窗口重新调整大小时,在右边留下一个空格!
每当窗口调整大小时,如何对这些图像进行定位?