html - 如何使图像列表居中？

Question

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

这是JSFiddle 演示

<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

这和你要找的一样吗？请注意它使用了一些旧浏览器中不可用的属性。具体来说nth-child()；