0

所以我有一个大的 div 标签。用于此的 css 样式是：

.thumbcontainer {
    width: 900px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    display: block;
    overflow: hidden;
}

我有 4 个 div 标签。他们的 CSS 样式：

.thumbnails {
    float: left;
    margin-top: auto;
    margin-right: 10px;
    margin-bottom: auto;
    margin-left: 10px;
}

最后是代码：

<div class="thumbcontainer">

<div class="thumbnails">
<a href="gallery/1.jpg" style="" rel="lightbox[gallery]"><img src="gallery/1-thumbnail.jpg" width="150" height="112"  alt=""/></a>
</div>

<div class="thumbnails">
<a href="gallery/2.jpg" rel="lightbox[gallery]"><img  src="gallery/2-thumbnail.jpg" width="150" height="112"  alt=""/></a>
</div>

<div class="thumbnails">
<a href="gallery/3.jpg" rel="lightbox[gallery]"><img  src="gallery/3-thumbnail.jpg" width="150" height="112"  alt=""/></a>
</div>

<div class="thumbnails">
<a href="gallery/4.jpg" rel="lightbox[gallery]"><img  src="gallery/4-thumbnail.jpg" width="150" height="112"  alt=""/></a>
</div>

</div> <!-- End of thumbcontainer div -->

它可以工作，但是它们之间显然都与 20(10x2) 像素对齐。我尝试将拇指容器更改为文本中心对齐并没有做任何事情。

4

3 回答 3

3

您可以删除浮动，并将各个 .thumbnail div 设置为 display:inline-block。

要使 .thumbnail div 居中，您需要将父元素设置为 text-align:center。

因此，您将添加以下内容：

.thumbcontainer {
   text-align:center;
}

.thumbnails {
    float: none; // or remove float property
    display:inline-block;
}
于 2013-09-20T22:04:43.427 回答
0

您正在使用 float:left，这就是您发现所有缩略图都向左对齐的原因。如果你想在你的 div 中居中对齐这些元素，试试这个：

   .thumbcontainer {
    width: 900px;
    margin:0px auto;
    display: block;
    overflow: hidden;
    text-align:center;
}

.thumbnails {
display:inline-block;
margin:0px 10px;

}

于 2013-09-20T22:09:04.193 回答
0

不太确定你想达到什么目标？主要是我不确定容器 DIV。

这是你要找的吗？

如果没有，请解释尚未按预期工作的内容 - 谢谢！

PS：当您100％满意时，我会添加解释。;-)

于 2013-09-20T22:48:15.980 回答