對齊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/