我发现解决这个问题有点困惑。
我有父 DIV 和 3 个/更多子 DIV。
父 DIV 居中对齐,子 DIV 应向左浮动但应居中对齐。
CSS 包含,
.center {
float:left;
height:250px;
width:15%;
margin: 0 auto;
border: 1px solid black;
}
最佳答案
如果你想水平居中对齐你的元素,那么不要 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 中)或将其注释掉。现在这些是内联元素,这个空白将被解释为一个空格。
关于css - 居中对齐多个子DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13602965/