我需要将蓝色容器内的黄色框(无论它们有多少)居中对齐。如果黄色框很多,它们可以在第二行(或第三行等)下降,但它们应在蓝色容器内保持居中对齐。有什么想法吗?
HTML
<div id="container">test
<br />
<div class="box">foo bar</div>
<div class="box">foo bar</div>
<div class="box">foo bar</div>
<div class="box">foo bar</div>
</div>
CSS
#container {
background:lightblue;
width:100%;
}
.box {
width:10em;
float:left;
background:yellow;
margin:1em;
}
最佳答案
移除 div 上的 float 并将其替换为 display:inline-block。将 text-align:center 规则添加到容器 div:
#container {
background:lightblue;
width:100%;
text-align:center;
}
.box {
width:10em;
display:inline-block;
background:yellow;
margin:1em;
}
关于html - 如何对齐到中心 float 的 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18836308/