html - 如何对齐到中心 float 的 div？

Question

我需要将蓝色容器内的黄色框(无论它们有多少)居中对齐。如果黄色框很多，它们可以在第二行(或第三行等)下降，但它们应在蓝色容器内保持居中对齐。有什么想法吗？

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;
}

http://jsfiddle.net/585Eq/

Answer 1

移除 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;
}

jsFiddle example