中心在中心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;
}