CSS 居中对齐多个子 DIV
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13602965/
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
Center align multiple child DIV
提问by Santosh
I am finding it bit confusing working around this problem.
我发现解决这个问题有点令人困惑。
I have parent DIV and 3/more Child DIV.
我有父 DIV 和 3 个/更多子 DIV。
Parent DIV is center aligned and child DIV should be floating left but should be aligned center.
父 DIV 居中对齐，子 DIV 应向左浮动但应居中对齐。
CSScontains,
CSS包含，
.center {
float:left;
height:250px;
width:15%;
margin: 0 auto;
border: 1px solid black;
}
回答by George
If you want to horizontally align your elements centrally, then don't float them.
如果您想将元素水平居中对齐，则不要浮动它们。
Change the way they are displayed to inline-blockand align them in the center by changing the text-alignstyle of their parent:
inline-block通过更改text-align其父项的样式，更改它们的显示方式并将它们对齐在中心：
#parent {
text-align:center;
height:450px;
width:75%;
border:1px solid blue;
}
.center {
display:inline-block;
height:250px;
width:15%;
margin: 0 auto;
border: 1px solid black;
}<div id="parent">
<div id="child1" class="center"></div><!--
--><div id="child2" class="center"></div><!--
--><div id="child3" class="center"></div>
</div>Be sure to have no white-space or newlines between your children <div>s (in your HTML, that is) or comment it out. Now that these are inlineelements, this white-space will be interpreted as a space.
确保您的孩子之间没有空格或换行符<div>（即在您的 HTML 中）或将其注释掉。现在这些是内联元素，这个空白将被解释为一个空格。
回答by AGB
Automatic margins will not apply to an element which has a float applied. Removing the float should get you started...
自动边距不适用于应用了浮动的元素。去除浮动应该让你开始......
