对齐Div中的Div元素

Question

我无法将div内的div元素与中心对齐。

图像显示内部<div class="row ph"> <div class="col-sm-3 phi"></div> <div class="col-sm-3 phi"></div> <div class="col-sm-3 phi"></div> </div> 元素未在中心对齐。

我的代码如下：

style.css

我的.ph { background-color: green; position : relative; margin : 0 auto; } .phi { background-color: yellow; width: 20%; margin: 50px; height: 250px; } 如下所示。

position

当我搜索解决方案时，我发现了margin auto和{{1}}属性。你能帮我解决这个问题吗？

Answer 1

这么简单，只需添加

display: inline-block;

获取水平内部div 并将text-align: center;添加到外部div以使它们居中

你的CSS可能是这样的

.ph
{
background-color: green;
position : relative;
width: 100%;
text-align: center;
}

.phi
{
background-color: yellow;
width: 20%;
margin: 30px;
height: 250px;
display: inline-block;
}

退房： http://jsfiddle.net/xkqTR/2118/