居中对齐 a Child Div 与 Display Inline-Block 并设置 float Left

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

设置 text-align: left; 为 parent class 并将宽度从 % 更新为 px 像这样 width: 500px; 并设置 padding-left 给一些 px，所以你更新后的 parentclass 看起来像

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

FIDDLE 是 HERE

居中对齐 a Child Div 与 Display Inline-Block 并设置 float Left

Center Align a Child Div with Display Inline-Block and set float Left

css

alignment

center