我想以整个父块为中心，但是我希望子块被起草。我怎样才能做到这一点？

Question

HTML

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

CSS

div.parent {
    text-align: center;
}   

div.child {
    display: inline-block;
}

当前输出如下所示

O O O O

如果我缩小其页面宽度，现在看起来像

O O O 
  O

但我希望它看起来像是这样的（被牵制）

O O O
O

如果我添加“float：left;”进入子区块，当我没有足够的空间来显示子区块时，我看到父区块右侧的空白区域很宽。 我想在子块

的右侧和左侧都有相同的空白范围

我希望将整个父块保持在中间居中。 但我希望子阻止被起草。 我该如何更改我的CSS？

UPDATE（这会在子块的左侧和右侧保持相同的空白宽度，但是当子块到达第2行时，它会在中心显示子块）

http://jsfiddle.net/P6Dsb/

看到这个。左边和右边的空格不一样 即使缩小窗口大小，我总是希望它具有相同的宽度 这4个儿童区必须居中。

这很完美，因为它在孩子的左侧和右侧都有相同的空白宽度。但是孩子在第2行进入中间位置。它必须被起草。

更新PIC

Answer 1

您可以这样做：

div.parent {

    margin: 0 auto;
    display: table;        
}   

div.child {

    float: left;
    display: inline-block;
}

DEMO 1

<强>更新

我希望我明白你的意思......

这个怎么样：DEMO 2（用chrome测试）

div.parent {

    text-align: center;
    margin: 0 10% 0 30%; /* NOTE THIS */
}

div.child {

    display: inline-block;
    width: 100px;
    height: 100px;
    border: solid 1px;
    margin: 10px 10px 10px 10px;
    float: left;
}

使用Media queries

，您可以做得更优雅

Answer 2

使用以下css。

div.parent {
    text-align: center;
    min-width: 100px; /*width as per your requirement*/
    max-width: 200px; /*width as per your requirement*/
    margin: 0 auto;
}   

div.child {
    display: inline-block;
    float: left;
    width: 100px;
}

Answer 3

刚刚左对齐子div中的文本。

div.child {
    display: inline-block; 
    text-align: left;
}