html - 居中内联 block 图像

Question

我需要一些帮助来使一些图像居中

HTML:

<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<li>
    <a class="thumb" href="#">
        <img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
    </a>
</li>
<li>
    <a class="thumb" href="#">
        <img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
    </a>
</li>
<li>
    <a class="thumb" href="#">
        <img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
    </a>
</li>
<br>
<li>
    <a class="thumb" href="#">
        <img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
    </a>
</li>
<li>
    <a class="thumb" href="#">
        <img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
    </a>
</li>

CSS:

ul.thumbs {
    clear: both;
    padding-left: 0px;
}

ul.thumbs li {
    display: inline-block;
    /*float: left;*/
    padding: 0;
    margin: 5px 10px 5px 0;
    list-style: none;
}

a.thumb {
    padding: 2px;
    display: block;
    border: 1px solid #ccc;
}

ul.thumbs li.selected a.thumb {
    background: #DAA12F;
}

a.thumb:focus {
    outline: none;
}

ul.thumbs img {
    border: none;
    display: block;
    height: 120px;
    width: 120px;
    margin: 0px auto;
}

我需要将图像居中放置，以便它们保持对齐。我试过使用:

ul.thumbs {
    text-align:center;
} 

但是由于每行的图像数量不同，它们会错位

谢谢你的帮助，这让我发疯

编辑:我想我找到了一个以此为指导的解决方案:http://www.tightcss.com/centering/center_variable_width.htm但如果图像超过一行，它们将不再居中。最初我放了一个 br 标签来分解行并解决了这个问题，但是我使用的 JS 库不能很好地处理列表项之间的 br 标签。任何建议(您可以在此处查看问题 http://jsfiddle.net/HvZva/26/ )

Answer 1

对此有两种解决方案，一种是您希望图像居中，另一种是您的图像应该左对齐，但在页面上居中。

居中 block ，左对齐图片为此，您需要将以下内容添加到您的 css(或参见:http://jsfiddle.net/HvZva/20/)

ul.thumbs{
margin:0 auto;
width:416px;
}

我所做的基本上是告诉浏览器，这个无序列表的两边应该有相等的边距。但是由于这个对象的宽度是标准的 100%，我们也需要指定它，在本例中它是 416px。

居中对齐图片

如果这是静态内容，一个简单的方法是添加一个 div 类，其中包含每行的中心，然后添加“text-align:center;”对于那些 div，这将起到作用。

注意:有一种使 block 居中的新方法，但将图像向左对齐。但这涉及到box flex model和css 3，目前还没有被浏览器实现