css - 如何将固定大小的多个 float div居中

Question

我希望子 div 始终在其容器中居中，即使在调整大小时也不改变其大小。

问题示例:http://jsfiddle.net/bQMj7/

HTML

<div id='foo'><div id="container" class='group'>
    <div class='childs'>one</div>
    <div class='childs'>two</div>
    <div class='childs'>three</div>
    <div class='childs'>four</div>
    <div class='childs'>five</div>
    </div>
</div>

CSS

#foo {
       text-align:center;
    }

#container {
    background-color:beige;
    display:inline-block;
}

.childs {
    width:50px;
    height:50px;
    background-color:blue;
    float:left;
    margin-right:10px;
}

.group:after {
    clear: both;
    content: "";
    display: table;
}

我使用“inline-block/text-align:center”技术将子 div 在其主容器中居中。当您调整窗口大小时， float 的子 div 会折叠，这就是我想要的，但是当它们折叠时，它们不再在容器中居中。

我希望这些调整大小时折叠的 div 始终居中。

你有什么想法吗？

编辑:感谢您的回复，这正是我要找的!然而，我担心的是:

• 我使用 float left 而不是 inline-block 的原因是我希望这些子 div 彼此之间没有空格(它们确实有行元素，除非我弄乱了我的代码缩进以获得那些许多 child 在同一行代码)

• 我希望折叠的最后一行像其他行一样左对齐，但整个行居中。

这是针对上述两个问题的更新:http://jsfiddle.net/bQMj7/6/ .

Answer 1

您可以对所有这些使用 inline-block 并伪造一个 float : center ; 不存在。

#container{
    background-color:beige;
    display:inline-block;

}
#foo{
    text-align:center;

}

.childs {
    width:50px;
    height:50px;
    background-color:blue;
    display:inline-block;
    margin:5px;
}

演示 http://jsfiddle.net/bQMj7/1/