CSS - 让div水平对齐

Question

我有一个容器div，固定了宽度和高度，并设置了overflow: hidden。

我想在这个容器中放置一行横向的float: left的子div。当这些子div到达其父元素的右边界时，它们将自然地换行，即使父元素的height不允许这样做。效果如下图所示：

我希望它看起来像这样：

![正确][2] - 已删除图片替换为广告

注意：我想要的效果可以通过使用内联元素和white-space: nowrap来实现（如我在显示的图片中所做）。然而，这对我没有用（原因过于冗长，此处不再赘述），因为子div需要是块级元素。

- Robin Barnes

---

你的图片链接似乎已经失效了。如果你还有原始文件，请重新上传到stack.imgur。谢谢！ - Ilmari Karonen

Answer 1

您可以在容器中放置一个内部div，它足够宽以容纳所有浮动的div。

#container {
  background-color: red;
  overflow: hidden;
  width: 200px;
}

#inner {
  overflow: hidden;
  width: 2000px;
}

.child {
  float: left;
  background-color: blue;
  width: 50px;
  height: 50px;
}

<div id="container">
  <div id="inner">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

- LucaM

---

我该如何使外层 div 居中？我尝试在外层 div 上添加 align="center"，但似乎不起作用。 - hakunami

这也适用于百分比宽度。在我的情况下，我使用一个容器div，其width: 200％;，而子元素的每个width: 50％;。然后我可以在容器上使用transform: translateX(n％);来模拟走马灯效果，只要我有一个带有overflow: hidden;的父容器。 - evolross

Answer 2

父级 div 加上 style="overflow:hidden"，子级所有 div 加上 style="float: left"，可以让老版本浏览器（如IE7及以下）水平对齐 divs。

对于现代浏览器，您可以为所有子级 divs 使用 style="display:table-cell" ，这样就可以正确地水平呈现。

- Kwex

Answer 3

如果需要的话，现在可以使用CSS弹性盒子来水平和垂直对齐div。一般公式如下：

parent-div {
  display: flex;
  flex-wrap: wrap;
  /* for horizontal aligning of child divs */
  justify-content: center;
  /* for vertical aligning */
  align-items: center;
}

child-div {
  width: /* yoursize for each div */
  ;
}

- sriram hegde

---

优雅的解决方案。 - zawhtut

Answer 4

这似乎接近你所需要的内容：

#foo {
  background: red;
  max-height: 100px;
  overflow-y: hidden;
}

.bar {
  background: blue;
  width: 100px;
  height: 100px;
  float: left;
  margin: 1em;
}

<div id="foo">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

- Soeren Kuklau

Answer 5

您可以使用clip属性：

#container {
  position: absolute;
  clip: rect(0px,200px,100px,0px);
  overflow: hidden;
  background: red;
}

请注意，为了让clip正常工作，需要使用position: absolute和overflow: hidden属性。

- gogna

---

剪辑支持哪些浏览器？ - alex

clip属性在所有主流浏览器中都得到支持。注意：值“inherit”不受IE7及更早版本的支持。IE8需要一个！DOCTYPE。IE9支持“inherit”。 - dsomnus

Answer 6

如果浮动：left、display: inline-block超出容器的宽度，这两种方法都无法使元素水平对齐。

需要注意的是，如果元素必须水平显示，则容器不应换行：white-space: nowrap

- William B

Answer 7

将它们向左浮动。至少在Chrome中，您不需要像LucaM的示例中那样有一个包装器id="container"。

- Wolfpack'08