如何对齐居中浮动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上的浮标，然后将其替换为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示例

Answer 2

您可以尝试使用display:inline-block;

像这样更改您的CSS：

#container {background:lightblue;width:100%; text-align:center;}
.box {width:10em; display:inline-block; background:yellow; margin:1em;
}

演示JSFIDDLE

Answer 3

将您的CSS更改为以下内容：

#container { background:lightblue; width:100%;text-align:center }

.box { width:10em; display:inline-block; background:yellow; }

Answer 4

我不知道您是否使用自动边距功能。.但是我建议您将其作为菜单来处理。 它将像div一样工作。 我以这种方式向您展示，因为那是我确定它起作用的方式。

<ul id="container">test
    <br />
    <li class="box">foo bar</li>
    <li class="box">foo bar</li>
    <li class="box">foo bar</li>
    <li class="box">foo bar</li>
</ul>

CSS：

#container {
    text-align: center;
    height: <-- Specify a fixed height.
}
#container li {
    display: inline-block;
    margin-right: 30px; <-- This will the the margin between the items
    list-style-type: none;
}

那正是你想要的？ 还是要在蓝色div内自动调整所有黄色框？