0

我需要一些帮助将一些图像居中

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/）

4

6 回答 6

1

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

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

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

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

居中对齐图像

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

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

于 2012-07-27T16:38:28.353 回答
0

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

于 2012-07-27T15:39:43.357 回答
0

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

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

于 2012-07-27T15:45:58.523 回答
0 
ul.thumbs {
    display:inline-block;
    text-align:center;
}
于 2020-03-17T02:55:39.400 回答
-1

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

于 2012-07-27T15:40:43.240 回答
-1

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

于 2012-07-27T15:41:32.757 回答