Выравнивание элемента 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; 

, чтобы получить горизонтально внутренние дивы и добавьте text-align: center; к наружному дел до центра им

ваш 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/