多行水平居中的流体 div答案

【问题标题】：Horizontally centre fluid div of multiple rows多行水平居中的流体 div
【发布时间】：2014-08-09 18:40:42
【问题描述】：

我想实现下面的预期布局（第一张图片）但坚持实际布局（第二张）

我是这样开始的

.parent .child{
    float: left;
    width: 25%;
    height: 50px;
    margin: 5px 2px 2px 2px;
    background: #000;
}

我怎样才能使它更进一步达到预期的布局？

【问题讨论】：

标签： html css fluid-layout liquid-layout

【解决方案1】：

保持 css : 将 float 向左更改为 display:inline-block

.parent{ text-align: center;}
.parent .child{
 display:inline-block;
 width: 25%;
 height: 50px;
 margin: 5px 2px 2px 2px;
 background: #000;
}

【讨论】：

【解决方案2】：

试试这样：LINK

css:

.parent{
    margin: 0 auto;
    display:block;
    text-align:center;

}
.parent .child{
    display:inline-block;
    width: 25%;
    height: 50px;
    margin: 5px 2px 2px 2px;
    background: #000;
}

【讨论】：