如何對齊居中浮動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內自動調整所有黃色框？