在一个 div 容器标签中居中多个嵌套的 div 标签答案

【问题标题】：center multiple nested div tags in one div container tag在一个 div 容器标签中居中多个嵌套的 div 标签
【发布时间】：2013-09-20 22:01:26
【问题描述】：

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

【问题讨论】：

你想把.thumbnails居中，这样每个人都在一个新的行上，还是整个组？

标签： css html tags center

【解决方案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;
}

【讨论】：

谢谢，但它不起作用。我想我忘了提到所有的缩略图都在同一行？无论如何，这使它们都在一个垂直列中并且仍然没有居中。
删除浮动，显示为“inline-block”，并居中父 div 应该可以工作（见上面的小提琴） - 如果没有，你可能有其他东西覆盖了上面的样式你的样式表。
我该怎么办？我从字面上复制了上面的小提琴。这是 Dreamweaver 的屏幕截图，显示了它在做什么：imm.io/1gDTY 等等，我想我找到了。我有一个 img 风格，让我快速检查一下......
您可能将您的 img 设置为 display:block - 检查一下？
好的，我修复了它，将 img 设置为 display:block 我为标题图像设置了该设置，但我将其更改为 img.block，现在缩略图可以工作了。虽然在dreamweaver中以一列为中心，但是当我预览它们时，它们是连续的。

【解决方案2】：

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

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

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

}

【讨论】：

与其他人的回答一样，不起作用。这些是带有链接的图像，添加后现在在垂直列中排列。左边也有

【解决方案3】：

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

this 是您要找的吗？

如果没有，请解释什么尚未按预期工作 - 谢谢！

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

【讨论】：