css - 将子 Div 与 Display Inline-Block 居中对齐并设置 float 向左

Question

我这里有一个工作代码:http://jsfiddle.net/V3Suq/29/

问题

如何让 child 左对齐，例如像这样的截图:Screenshot

HTML

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

CSS

.parent {
    width: 100%;
    background: #f00;
    height: 210px;
   text-align: center;
}

.child {
    width: 150px;
    height: 100px;
    background: #000;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
}

Answer 1

使用 parent 类设置 text-align: left; 并将宽度从 % 更新为 px 像这样width: 500px; 并将 padding-left 设置为一些 px，因此更新后的 parent 类看起来像

.parent {
    width: 500px;
    background: #f00;
    height: 210px;
    text-align: left;
    padding-left:50px;
}

FIDDLE 是 HERE