居中内嵌块图像

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

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

中心块，左对齐图像为此，您需要将以下内容添加到您的 css（或参见： http : //jsfiddle.net/HvZva/20/ ）

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

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

居中对齐图像

如果这是静态内容，一种简单的方法是添加一个带有 center 类的 div 来包裹每一行，然后添加“text-align:center;” 对于那些 div，这将奏效。

注意：有一种新方法可以使块居中，但将图像向左对齐。 但这涉及到 box flex 模型和 css 3，并且还没有被浏览器实现

Answer 2

应用text-align: center; to .thumbs.noscript ul 在 jsfiddle 中修复它

Answer 3

你可以给父元素一个宽度并应用margin-left: auto; margin-right: auto; margin-left: auto; margin-right: auto;

http://jsfiddle.net/HvZva/13/

Answer 4

ul.thumbs {
    display:inline-block;
    text-align:center;
}

Answer 5

像这样的东西？ http://jsfiddle.net/HvZva/11/

Answer 6

我可能误解了你的问题，但这是你想要的吗？ http://jsfiddle.net/HvZva/12/