Html CSS - 使 div 水平对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37103/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - Make divs align horizontally
提问by Robin Barnes
I have a container div with a fixed widthand height, with overflow: hidden.
我有一个带有固定width和的容器 div height，带有overflow: hidden.
I want a horizontal row of float: left divs within this container. Divs which are floated left will naturally push onto the 'line' below after they read the right bound of their parent. This will happen even if the heightof the parent should not allow this. This is how this looks:
我想要一个水平行的 float: left divs 在这个容器中。向左浮动的 Div 在读取其父级的右边界后自然会推到下面的“行”上。即使height父母不允许这样做，也会发生这种情况。这是它的外观：
![Wrong][1] - removed image shack image that had been replaced by an advert
![错误][1] -删除了已被广告取代的图像小屋图像
How I would like it to look:
我希望它看起来如何：
![Right][2] - removed image shack image that had been replaced by an advert
![Right][2] -删除了已被广告取代的图像小屋图像
Note: the effect I want can be achieved by using inline elements & white-space: no-wrap(that is how I did it in the image shown). This, however, is no good to me (for reasons too lengthy to explain here), as the child divs need to be floated block level elements.
注意：我想要的效果可以通过使用内联元素 & 来实现white-space: no-wrap（这就是我在显示的图像中所做的）。然而，这对我没有好处（原因太长，无法在这里解释），因为子 div 需要浮动块级元素。
回答by LucaM
You may put an inner div in the container that is enough wide to hold all the floated divs.
您可以在容器中放置一个足够宽的内部 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>回答by Kwex
style="overflow:hidden"for parent divand style="float: left"for all the child divsare important to make the divsalign horizontally for old browsers like IE7 and below.
style="overflow:hidden"对于父级div和style="float: left"所有子级divs来说，divs对于 IE7 及更低版本的旧浏览器进行水平对齐非常重要。
For modern browsers, you can use style="display: table-cell"for all the child divsand it would render horizontally properly.
对于现代浏览器，您可以style="display: table-cell"为所有子项使用divs，它会正确地水平渲染。
回答by S?ren Kuklau
This seems close to what you want:
这似乎接近你想要的：
#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>回答by fcurella
you can use the clipproperty:
您可以使用该clip属性：
#container {
position: absolute;
clip: rect(0px,200px,100px,0px);
overflow: hidden;
background: red;
}
note the position: absoluteand overflow: hiddenneeded in order to get clipto work.
注意position: absolute和overflow: hidden需要以便开始clip工作。
回答by William B
Float: left, display: inline-block will both fail to align the elements horizontally if they exceed the width of the container.
Float: left, display: inline-block 如果元素超出容器的宽度，它们都将无法水平对齐元素。
It's important to note that the container should not wrap if the elements MUST display horizontally:
white-space: nowrap
重要的是要注意，如果元素必须水平显示，则容器不应换行：
white-space: nowrap
回答by sriram hegde
You can now use css flexbox to align divs horizontally and vertically if you need to. general formula goes like this
如果需要，您现在可以使用 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 */ ;
}
回答by Wolfpack'08
Float them left. In Chrome, at least, you don't need to have a wrapper, id="container", in LucaM's example.
向左漂浮。至少在 Chrome 中，您不需要id="container"在 LucaM 的示例中使用包装器。
回答by Manjuboyz
You can do something like this:
你可以这样做：
#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>