html - 当父级将所有子元素居中对齐时，将一个子元素左对齐

Question

我有一个 DIV 集以将所有子元素 CENTER 与 text-align: center; 对齐，但我希望其中一个子元素向左对齐，同时保持其余元素居中。

我怎样才能做到这一点？

我试图向左浮动那个元素，但它搞砸了我的设计，因为我根本没有使用 float 。

.parent {
    text-align: center;
    margin-bottom: 15px;
    margin-top: 8px;
}
.child (I want to align this one left) {
    display: inline-block;
    font-family: 'Source Sans Bold', Helvetica neue, verdana, arial;
    font-size: 16px;
    background-color: #5a8da3;
    padding: 4px;
}

Answer 1

有多种方法可以做到这一点。但是在与 future 的代码集成时，试图用这个需求来想象你 future 的一些问题。最好的方法是使用不同的位置。

您希望父级的所有 div 元素都居中，特别是其中一个元素。如果你没有给你想要左边的那个 div 一个显示属性，它将不遵守父级的 CSS 规则:text-align:center;

我在所有想要居中的 div 元素上使用了 display 属性，但我将 CSS 规则:position:relative; 设置为父元素。这将强制所有具有 position:absolute; 的子 div 受父级约束。因此，我可以将属性 top 和 left 设置为我想放在左侧的子 div，这些属性将根据父宽度而不是浏览器的窗口进行计算。

这是最好的解决方案，因为绝对定位的子 div 不会影响结构化模板，因此当您将来添加更多时，不会将居中的 div 推离父级的中心。

这是你的例子:

http://jsfiddle.net/77wc17yo/

您现在可以使用 CSS 属性移动左侧的 div:top、left、bottom、right。

.parent {
  background:#fefefe;
  padding:5px;
  border:1px solid black;
  text-align:center;
  position:relative;
}

.centerd {
   border:1px solid green;
  background:gold;
  padding:90px;
  display:inline-block;
}

.left {
  padding:40px;
  border:1px solid red;
  background:orange;
  width:40px;
  position:absolute;
  left:0;
  top:20px;

}