Question

我希望子div在它们的容器中始终居中，即使在调整大小时也是如此，并且不会改变它们的大小。

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放在其主容器中。当你调整窗口大小时，浮动的子div会崩溃，这就是我想要的，但是当它们崩溃时，它们不会再集中在它们的容器中。

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

你有什么想法吗？

编辑：感谢您的回复，这正是我正在寻找的！但我担心的是：

我之所以使用float left而不是inline-block是因为我希望那些子div在彼此之间没有空格（除了我搞乱我的代码缩进以获得那些许多孩子在同一行代码上）
我希望折叠的最后一行与其他行一样左对齐，但整体都在中心。

以上是两个问题的更新：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; } 不存在。

{{1}}

DEMO http://jsfiddle.net/bQMj7/1/

Answer 2

这就是你要找的东西：

http://jsfiddle.net/collabcoders/bQMj7/3/

#container{
    background-color:beige;
    display:inline-block;
}
#foo{
    text-align:center; 
}
.childs {
    width:50px;
    height:50px;
    background-color:blue;
    display:inline-block;
    margin-right:10px;
}
.group:after {
    clear: both;
    content: "";
    display: table;
}

编辑：如果我理解正确你想要在块之间消失空间但仍然保持中心。由于某种原因，内联块在右侧放置4px空间，因此只需添加margin-right: -4px;即可修复：

这是新的好词：http://jsfiddle.net/collabcoders/bQMj7/10/

和.child类的更新

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

如何使固定大小的多个浮动div居中

2 个答案: