CSS-使div水平对齐

我有一个固定的容器DIVwidth和height，用overflow: hidden。

我想要水平行的float：此容器内的div左。在向左浮动的Divs阅读其父级的右边界后，自然会推到下面的“行”上。即使height父级的不允许这样做，也会发生这种情况。这是这样的样子：

！[错误] [1]-删除了已被广告替换的图片棚屋图片

我希望它看起来如何：

！[右] [2]-删除了已被广告替换的图像棚屋图像

注意：我想要的效果可以通过使用内联元素＆来实现white-space: no-wrap（这就是我在所示图像中所做的事情）。但是，这对我不利（由于冗长的原因，在这里无法解释），因为子div需要浮动块级元素。

您可以在容器中放置一个足够宽的内部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>

style="overflow:hidden"对于父级div和style="float: left"所有子级divs而言，使divsIE7及更低版本的旧浏览器水平对齐非常重要。

对于现代浏览器，您可以将style="display: table-cell"所有子项都使用，divs并且它将正确地水平呈现。

这似乎接近您想要的：

#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>

您可以使用该clip属性：

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

请注意position: absolute和overflow: hidden，以便开始clip工作。

浮动：左，显示：如果元素超出容器的宽度，它们都将无法水平对齐元素。

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

现在，您可以根据需要使用CSS Flexbox在水平和垂直方向上对齐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 */
  ;
}

漂浮他们离开。至少在Chrome中，id="container"在LucaM的示例中，您不需要包装器。

您可以执行以下操作：

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

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

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