部門内のDiv要素の整列

Question

div内のdiv要素を中央に揃えることができません。

。

イメージは、内側のdiv要素が中央に揃っていないことを示しています。

私のコードは私のstyle.cssは以下のとおりである

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

以下の通りです。私は解決策を探したときに

.ph 
{ 
background-color: green; 
position : relative; 
margin : 0 auto; 
} 

.phi 
{ 
background-color: yellow; 
width: 20%; 
margin: 50px; 
height: 250px; 
} 

、私はpositionとmargin auto属性に関するましました。あなたは解決策を教えてくれますか？

Answer 1

そう単純で、単に

は、あなたの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; 
} 

のようなものかもしれ

display: inline-block; 

が水平方向に内側のdivを を取得するために追加し、それらを中心に、外側のdivにtext-align: center;を追加

チェックアウト： http://jsfiddle.net/xkqTR/2118/