Question

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

我想将所有这些浮动的子div与浮动容器对齐（不是文本对齐）。

我该怎么做？

同时，浏览器中只显示其中一个子div ..用户点击Prev / Next查看其他子div（有点像Carousel）

显然，如果我使用float：left为子div，我将面临问题中心对齐。

Answer 1

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

float CSS属性从文档中的上下文中删除元素（类似于position:absolute/fixed）。因此，元素不能“位于父元素的中心”。

Answer 2

我今天正在为父容器中的三个div搜索解决方案，我遇到了这个旧帖子，似乎没有提供好的解决方案。

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

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

解决方案是不使用float“从其上下文中删除一个元素”，正如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，则他们可能不需要float。将非浮动块置于另一个块内的最佳方法是分配以下样式：

.child {
    margin: 0 auto;
}

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

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

Answer 4

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

中心对齐浮动容器内的浮动div

4 个答案: