Html 我希望将整个父块居中，但希望子块向左。我该怎么做？

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>

电流输出如下所示

O O O O

O O O 
  O

如果缩小其页面宽度，现在看起来是这样的

O O O O

O O O 
  O

但我希望它看起来像这样（左）

如果我将“float:left；”添加到子块中，当父块的右侧没有足够的空间显示子块时，我会看到很大范围的空白。 我希望在子块的右侧和左侧有相同范围的空格

我要保持整个<强>父块<强>右，以中间为中心。 但我希望子块被左移。 如何更改CSS

更新（这将保持子块左右两侧的空白宽度相同，但当子块到达第二行时，它会在中间显示子块）

看这个。左边和右边的空白是不一样的。 我总是希望它的宽度相同，即使我缩小了窗口大小。
这4个子块必须居中。

这非常完美，因为它在child的左侧和右侧都有相同的空白宽度。但孩子在第二排排中间。它必须是左撇子。

更新PIC

使用以下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;
}

---

您可以这样做，例如：

div.parent {

    margin: 0 auto;
    display: table;        
}   

div.child {

    float: left;
    display: inline-block;
}

更新

我希望我能理解你的意思

这个怎么样：（用铬测试）

---

使用

只需将子div中的文本左对齐，就可以更优雅地执行此操作

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

---

看起来您希望前3个块位于同一行上，这与您在文本中描述的内容大不相同。试试看它是否符合你的需要：与BwithLove提供的解决方案相同。我想你需要提供一些信息：1）你需要什么类型的元素来集中？（文本与图像不同）。让我看看我是否明白了：你需要两个div，一个用于左（儿童）和两个用于其他元素？@BogdanBiv谢谢！jsfiddle.net/P6Dsb/1请检查这个。若缩小窗口宽度，则在子块的右侧会看到更宽的空白。我想要和右边一样宽的。有可能吗？@MKK。例如，您需要在第一个父级中创建另一个父级。这是HTML本身的错误，而不是CSS。如果您不使用

float

，它将自动应用于左侧。但是，如果将其放在具有

文本对齐：居中的元素中，则文本也将应用于居中。如果需要对齐文本，则需要设置宽度以强制调整div的大小。是否清除？：）谢谢请看这个。若缩小窗口宽度，则在子块的右侧会看到更宽的空白。我想要和右边一样宽的。有可能吗？有。。或我不明白你的意思。。。您可以增加宽度，例如。。。当你缩小窗口（在Chrome上测试）时，你的左右边距是一样的……我在Mac上使用firefox。请查看我的更新（更新图片）您是否看到子元素右侧有更多的空白？？@MKK-更新答案：）@BwithLove谢谢！但是宽度一直在变化，因为我的页面是用响应式设计设计的，可以通过许多设备访问。您指定的是最小和最大宽度，而不是固定宽度。
div.child {
    display: inline-block; 
    text-align: left;
}