Bootstrap css center nested div

Question

Я долгое время был кодировкой переднего конца, совсем не кодировался. Теперь я снова пытаюсь что-то повторить, и я как бы застрял в чем-то и надеюсь, что вы, ребята, можете мне помочь :)

У меня есть начальная строка с вложенными div. Я хочу центрировать выравнивание вложенных div, но, похоже, не может понять, как это сделать. Кто-нибудь может подтолкнуть меня в правильном направлении? Мой код выглядит следующим образом:

<!--Features block Start--> 
<div class="row"> 
<div id="features" class="col-sm-12"> 
    <div class="row"> 
     <div class="col-sm-3 features-content"><img class="center" src="img/icons/ssd.png" alt="ssd"><h3 class="center">SSD.</h3><p class="center">Placeholder text.</p></div> 
     <div class="col-sm-3 features-content"><img class="center" src="img/icons/network.png" alt="network"><h3 class="center">Network.</h3><p class="center">Place holder text</p></div> 
     <div class="col-sm-3 features-content"><img class="center" src="img/icons/database.png" alt="database"><h3 class="center">Database.</h3><p class="center">Placeholder text.</p></div> 
    </div> 
    <div class="row features-content"> 
     <div class="col-sm-3 features-content"><img class="center" src="img/icons/opensource.png" alt="ssd"><h3 class="center">We <span class="glyphicon glyphicon-heart heart-color"></span> Open Source.</h3><p class="center">Placeholder text.</p></div> 
     <div class="col-sm-3 features-content"><img class="center" src="img/icons/cpanel.png" alt="network"><h3 class="center">CPanel.</h3><p class="center">Placeholder text.</p></div> 
     <div class="col-sm-3 features-content"><img class="center" src="img/icons/support.png" alt="database"><h3 class="center">24/7 Support.</h3><p class="center">Placeholder text.</p></div> 
    </div>    
</div> 
</div> 
<!--Features block Stop--> 

со следующими CSS

#features{ 
background-color:#e1dbc5; 
position: relative; 
} 
#features-content{ 
margin: 0 auto; 
} 

, что приводит к: http://i.imgur.com/AhJKjkE.png

кто-нибудь может пролить некоторый свет на это для меня? Если есть что-то непонятное или вам нужна дополнительная информация от меня, спросите!

С уважением, Arjen.

Answer 1

#features-content{ 
margin: 0 auto; 
text-align:center; 
} 
#features{ 
background-color:#e1dbc5; 
position: relative; 
    text-align:center; 
} 

выравнивание текста центр на оба идентификаторов

Answer 2

на самом деле это намного проще, если вы используете сетку по умолчанию для более гнездовья, чтобы получить вашу конструкцию прямо

<div class="row"> 
    <div id="features" class="col-sm-12" style="text-align:center;"> 
     <div class="row"> 
      <div class="col-sm-4 features-content"> 
       <img class="center" src="img/icons/ssd.png" alt="ssd"> 
       <h3 class="center">SSD.</h3> 
       <p class="center">Placeholder text.</p> 
      </div> 
      <div class="col-sm-4 features-content"> 
       <img class="center" src="img/icons/network.png" alt="network"> 
       <h3 class="center">Network.</h3> 
       <p class="center">Place holder text</p> 
      </div> 
      <div class="col-sm-4 features-content"> 
       <img class="center" src="img/icons/database.png" alt="database"> 
       <h3 class="center">Database.</h3> 
       <p class="center">Placeholder text.</p> 
      </div> 
     </div> 
     <div class="row features-content" style="text-align:center;"> 
      <div class="col-sm-4 features-content"> 
       <img class="center" src="img/icons/opensource.png" alt="ssd"> 
       <h3 class="center">We <span class="glyphicon glyphicon-heart heart-color"></span> Open Source.</h3> 
       <p class="center">Placeholder text.</p> 
      </div> 
      <div class="col-sm-4 features-content"> 
       <img class="center" src="img/icons/cpanel.png" alt="network"> 
       <h3 class="center">CPanel.</h3> 
       <p class="center">Placeholder text.</p> 
      </div> 
      <div class="col-sm-4 features-content"> 
       <img class="center" src="img/icons/support.png" alt="database"> 
       <h3 class="center">24/7 Support.</h3> 
       <p class="center">Placeholder text.</p> 
      </div> 
     </div>    
    </div> 
</div> 

check this