css - 居中对齐多个子DIV

Question

我发现解决这个问题有点困惑。

我有父 DIV 和 3 个/更多子 DIV。

父 DIV 居中对齐，子 DIV 应向左浮动但应居中对齐。

CSS 包含，

.center {
   float:left;
   height:250px;
   width:15%;
   margin: 0 auto;
   border: 1px solid black;
}

I have a sample of the code link here...

Answer 1

如果你想水平居中对齐你的元素，那么不要 float 它们。

将它们的显示方式更改为 inline-block并通过更改 text-align 将它们居中对齐他们 parent 的风格:

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

请确保您的 child 之间没有空格或换行符 <div> s(在您的 HTML 中)或将其注释掉。现在这些是内联元素，这个空白将被解释为一个空格。