Question

我需要将蓝色容器内的黄色框（无论它们有多少）居中对齐。如果它们很多，黄色方框可以在第2（或第3行等）下降，但它们应保持在蓝色容器内的中心对齐。任何想法怎么做？

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

Answer 2

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

更改您的CSS，如： -

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

DEMO 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中自动调整所有黄色框？

如何与中心浮动的div对齐？

4 个答案: