对齐Div中的Div元素

Question

我无法将div中的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属性。你能帮我解决这个问题吗？

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/