Html 我如何与中心浮动div对齐？

我需要将蓝色容器内的黄色框（无论有多少）居中对齐。如果黄色框较多，则可以放在第二排（或第三排等），但它们应在蓝色容器内保持中心对齐。有什么办法吗

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%; text-align:center;}
.box {width:10em; display:inline-block; background:yellow; margin:1em;
}

移除div上的浮动，并将其替换为display:inline块。将文本对齐：居中规则添加到容器div：

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

将css更改为以下内容：

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

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

我不知道你用自动保证金是否有效。。但我建议你把它当作菜单来处理。它将像一个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;
}

#容器{
文本对齐：居中；
高度：您需要清除边距：@Ryan-这些div看起来居中？测试文本也应该居中吗？您用演示回答的速度最快，所以我会接受您的答案。谢谢。
#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;
}