我有一个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;
}
有多种方法可以解决这个问题。但是，在与将来的代码集成时，尝试通过此需求可视化将来的一些问题。最好的方法是使用不同的位置。
您希望将父对象的所有div元素特别地居中放置。如果您没有将display属性赋予您想要向左的那一个div，它将不会遵循父级的CSS规则：text-align：center;
我在所有要居中的div元素上使用了display属性，但设置了CSS规则：position：relative; 给父母 这将迫使所有子div的位置为：absolute; 受父母的约束。因此，我可以将属性的顶部和左侧设置为要放在左侧的子div，这些属性将根据父级宽度而不是浏览器的窗口进行计算。
这是最好的解决方案，因为子div的绝对位置不会影响结构化模板，因此在将来添加更多div时不会将居中的div推离父级的中心。
这是您的示例：
现在，您可以使用CSS属性（顶部，左侧，底部，右侧）移动左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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句