Question

所以我有一个大的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）像素。我尝试将thumbcontainer更改为文本中心对齐并没有做任何事情。

Answer 1

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

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

所以你要添加以下内容：

.thumbcontainer {
   text-align:center;
}

.thumbnails {
    float: none; // or remove float property
    display:inline-block;
}

Answer 2

你正在使用float：left，这就是你发现所有缩略图都对齐的原因。如果您想在div中居中对齐这些元素，请尝试以下方法：

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

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

}

Answer 3

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

this您要找的是什么？

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

PS：当你100％满意时，我会添加一个解释。 ; - ）

在一个div容器标记中居中多个嵌套div标记

3 个答案: