在浮动容器内居中对齐浮动 div

Question

我有一个带有多个子浮动 div 的浮动容器。

我想将所有这些浮动子 div 相对于浮动容器居中对齐（不是文本对齐）。

我该怎么做？

一次，浏览器上只有 1 个子 div 可见。用户单击上一个/下一个来查看其他子 div（有点像轮播）

显然，如果我对子元素使用 float:left ，我将面临中心对齐问题分区

Answer 1

您无法相对于父元素对齐浮动元素。

float CSS 属性将元素从文档中的上下文中分离出来（类似于 position:absolute/fixed）。因此，该元素无法定位在“父元素的中心”。

Answer 2

我今天正在为父容器内的三个 div 寻找解决方案，我发现了这篇旧文章，其中似乎没有提供好的解决方案。

我的情况：我有一个宽度为100%的父容器，以便它适合屏幕。我还设置了最大宽度，以便父容器不会变得太大。在最大宽度下，我希望三个子 div 全部显示在一行中。

随着页面缩小并且父容器宽度缩小，我希望三个子 div 回流，每个子 div 都被推到前一个子 div 下方，直到它们全部垂直堆叠。当发生这种情况时，我希望子 div 在父容器内保持中心对齐。

解决方案是不使用浮动，正如Rob W真正所说的那样“从上下文中剥离元素”，而是使用内联块：

.parentContainer{
   margin:0 auto; /*keep centered in page*/
   width:100%; /*stretch to page*/
   max-width:800px; /*expand up to 800px*/
   text-align:center; /*keep my children centered*/
}
.childDiv{
   display:inline-block /*treat me as a block that flows like text*/
   width:230px; /*set my size*/
   vertical-align:top; /*keep me aligned at the top of my parent even if my siblings are taller than me*/
}

<div class='parentContainer'>
   <div class='childDiv'>Content 1</div>
   <div class='childDiv'>Content 2</div>
   <div class='childDiv'>Content 3</div>
</div>

您可以浮动父容器，给它绝对定位，几乎任何东西，子 div 都会保持相同的行为。

干杯

Answer 3

如果您一次只显示一个子 div，它们可能不需要浮动。将非浮动块在另一个块内居中的最佳方法是指定以下样式：

.child {
    margin: 0 auto;
}

这将使 div.child 居中，因为左右边距将相等地跨度以适合父容器。同样，您可以将 div 向左和向右对齐：

.left {
    margin-right: auto;
}
.right {
    margin-left: auto;
}

Answer 4

如果容器和子容器的宽度都是固定的，则可以将 margin-left 和 margin-right 设置为（容器 div 宽度 - 包含的宽度宽度）/2 。当然，如果您有填充和边框，则必须在公式中考虑它们。