html - 居中 div 并将新行 div 向左移动

Question

我在一个容器中有一个固定大小的分区。我希望它们相对于容器居中，但如果下一行有分隔，则它应该从左侧开始它的位置，请参见示例。

如您所见，我现在所拥有的显示在图像的顶部，所有分区都在容器的中心对齐，但请注意第二行分区 - 它们的开始位置。

所需的效果显示在图像的第二个示例中。如何使用 css 实现这一点？

HTML:

<div class="container">
 <div class="child">1</div>
 <div class="child">2</div>
 <div class="child">3</div>
 <div class="child">4</div>
 <div class="child">5</div>
</div>

CSS:

.container {
 text-align:center;
}

.child {
 position:relative;
 display:inline-block;
 width: 500px;
 height: 200px;
}

Answer 1

像这样在 .child 类中添加 float:left<强> DEMO

CSS:

.child {
    position:relative;
    display:inline-block;
    width: 500px;
    height: 200px;        
    float:left;
}