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。

居中对齐图片

如果这是静态内容，一种简单的方法是添加一个div，其中包含每行的中心类，然后添加“text-align：center;”对那些div来说，那就行了。

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

Answer 2

将text-align: center;应用于.thumbs.noscript ul将其修复为jsfiddle

Answer 3

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

Answer 4

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

Answer 5

您可以为父元素指定宽度并应用margin-left: auto; margin-right: auto;

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

Answer 6

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

中心内联块图像

6 个答案: