如何将图像列表居中？

Question

如何以480px的屏幕宽度连续居中3幅图像，以及320px的2幅图像？

这是JSFiddle Demo

<ul>
    <li><img/></li>
    ...
</ul>

@media (max-width: 480px) {} 
@media (max-width: 320px) {}

Answer 1

在display: inline-block;和<li>上text-align: center;放置<ul>。这样，您的图像将始终居中对齐。在您的媒体查询中，您可以设置<ul>（display: block;）的宽度，这样您就可以将正确数量的图片排列在一起。

例如： http://jsfiddle.net/skeurentjes/qfrRG/2/

Answer 2

这样的事情就完成了工作：

http://jsfiddle.net/isherwood/qfrRG/4/

@media (max-width: 480px) {
    /* would like 3 centered images in a row */
    img {width: 30%; margin-left: 2%;}
}
@media (max-width: 320px) {
    /* would like 2 centered images in a row */
    img {width: 45%; margin-left: 5%}
}

调整宽度和边距以适应。

Answer 3

this是否与您所寻找的一样？ 请注意，它使用旧浏览器中不可用的一些属性。具体来说是nth-child();