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

Question

我有一个DIV，使用text-align: center;来使所有子元素居中对齐，但是我想让其中一个子元素靠左对齐，同时保持其他元素居中对齐。

我该如何实现这个效果？

我尝试将该元素左浮动，但这会破坏我的设计，因为我根本没有使用浮动。

.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;
}

- samyb8

---

将该子div的类设置为"child left"，并在CSS中指定样式为.child.left{//style}。 - Balaji Viswanath

一个 -1 应该包含一条解释为什么的注释。这个问题非常合法。 - samyb8

Answer 1

有多种方法可以实现这个要求。但是在与未来的代码集成时，尝试通过可视化一些未来的问题，最好的方法是使用不同的位置。

您希望父元素的所有div元素都居中，除了一个特定的元素。如果您不给左侧要对齐的一个div元素设置display属性，它将不会遵守父级的CSS规则：text-align:center; 我在所有要居中的div元素上使用了display属性，但我将CSS规则：position:relative;设置为父级。这将强制所有具有position:absolute;的子div受到父级的限制。因此，我可以将要放在左侧的子div的属性top和left设置为基于父级宽度计算的值，而不是基于浏览器窗口的值。

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

以下是示例： http://jsfiddle.net/77wc17yo/ 现在，您可以使用CSS属性：top，left，bottom，right来移动您的左侧div。

.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;

}

- Ramo

---

谢谢。我不知道为什么，但是我的问题得到了-1的评分，而我认为它非常合理。如果您能给我一个+1的评分，我会很感激，同时我会将您的回答设置为正确答案。 - samyb8

Answer 2

工作示例：

http://jsfiddle.net/852ewccc/2/

我在左侧的 div 上使用了“float: left”，并在另一个 div 上使用了“margin: 0 auto;”来居中它。

HTML：

<div id="parent">
    <div id="left">

    </div>
    <div id="center">
    </div>
</div>

CSS：

#parent{
    width: 500px;
    height: 100px;
    background: blue;
}
#center{
    margin: 0 auto;
    width: 200px;
    height: 50px;
    background: green;
}
#left{
    width: 100px;
    background: orange;
    height: 30px;
}

- What have you tried

---

因为它们自然地向左对齐，所以您不需要在要向左浮动的元素的CSS中添加float:left，通过删除float:left，居中的元素将位于左侧的div下方。 - akaBase

@samyb8 - 已更新。公平地说，您在问题中没有提到这一点。 - What have you tried

Answer 3

JSFiddle: http://jsfiddle.net/wafoyyLz/

浮动是最好的选择，你应该考虑让其他元素浮动，但如果你只想让一个特定的元素文本对齐：

HTML:
<div class="parent">
    <div class="children"> Child 1 </div>
    <div class="children"> Child 2 </div>
    <div class="children alignLeft"> Child 3 </div>
    <div class="children"> Child 4 </div>
    <div class="children"> Child 5 </div>
</div>

CSS:
.parent {
    border: 1px solid #000;
    text-align: center;
    margin-bottom: 15px;
    margin-top: 8px;
}
.alignLeft {
    background-color: #5a8da3;
    text-align: left;
}

这样做可以让您通过硬编码或使用JQuery的添加/删除类将该类添加到其他子元素中。

请记住，这种方法并不适用于所有类型的元素。

- MrVentzi

---

只有当.alignLeft div的宽度为100%时，这才有效。如果它们的宽度较小，则div将居中对齐，并且其中的文本仍向左对齐，这并没有帮助，因为我需要整个.alignLeft div向左对齐。 - samyb8

因此，您应该浮动您的div。另外，如果您没有提供足够的细节（例如显示您的HTML或实时页面），请不要期望比这更好的答案... - MrVentzi