当父对齐所有子元素到中心时,将一个子元素对齐到左侧

时间:2014-10-24 15:47:04

标签: html css alignment center

我有一个DIV设置,将所有子元素CENTER与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;
}

3 个答案:

答案 0 :(得分:6)

有很多方法可以做到这一点。但是在与未来代码集成时,尝试用这个要求可视化您未来的一些问题。最好的方法是使用不同的职位。

您希望父级的所有div元素在特定区域中居中。如果你没有给左边想要的一个div显示属性,它将 NOT 遵守父级的CSS规则: text-align:center;

我在所有想要居中的div元素上使用了display属性但我设置了CSS规则: position:relative; 到父级。这将强制所有具有 position:absolute; 的子div被父级绑定。因此,我可以将属性的顶部和左侧设置为我想要放在左边的子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;

}

答案 1 :(得分:1)

工作示例:

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

我在左侧div上使用了float: left,在margin: 0 auto;上使用了另一个div的中心。

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

答案 2 :(得分:0)

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

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

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的add / remove类将类添加到其他子节点。

请记住,这不适用于所有类型的元素。