CSS - 使div水平对齐

时间:2008-08-31 21:05:42

标签: html css alignment

我有一个宽度和高度固定的容器div,溢出:隐藏。

我想要一个水平行的float:在这个容器中留下div。左侧浮动的Div将在读取其父级的右边界后自然地推到下面的“线”上。即使父级的高度不允许这样,也会发生这种情况。这是这样的:

![错误] [1] - 删除了已被广告替换的图像小屋图片

我希望它看起来如何:

![右] [2] - 删除了已被广告替换的图像小屋图片

注意:我想要的效果可以通过使用内联元素来实现。 white-space:no-wrap(就像我在图片中所做的那样)。然而,这对我来说并不好(因为这里的解释太冗长),因为子div需要浮动块级元素。

8 个答案:

答案 0 :(得分:93)

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

答案 1 :(得分:28)

对于所有孩子style="overflow:hidden",父<{1}}和div的{​​p> style="float: left"对于{IE}及以下的旧浏览器水平对齐divs非常重要。

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

答案 2 :(得分:5)

这看起来很接近你想要的:

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

答案 3 :(得分:5)

您可以使用clip属性:

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

请注意position: absoluteoverflow: hidden,以便clip能够正常工作。

答案 4 :(得分:4)

Float:left,display:如果超过容器的宽度,inline-block将无法水平对齐元素。

重要的是要注意,如果元素必须水平显示,容器不应该换行:     white-space: nowrap

答案 5 :(得分:3)

如果需要,您现在可以使用css flexbox水平和垂直对齐div。通用公式就是这样

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

答案 6 :(得分:1)

将他们漂浮起来。至少在Chrome中,您不需要在LucaM的示例中使用包装器id="container"

答案 7 :(得分:0)

您可以执行以下操作:

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