Bootstrap 3 Выравнивание плавающих столбцов в центр

Question

Я показываю информационный блок с 3 строками в бутстрапе. Я использую bootstrap cols, чтобы сделать их отзывчивыми. Для небольших скриншотов я использую col-sm-4, а для больших экранов я использую col-lg-3, чтобы сделать мои изображения подходящими.

<div class="container clearfix row" style=" 
width: 100%; 
display: table; 
margin: 0 auto;"> 
     <!-- post list --> 
     <div class="test col-sm-4 col-md-4 col-lg-3" style=" 
       display: table-cell; 
       margin: 0 auto;"> 
      <figure> 
      <img alt="" src="assets/icons/find-awesome-stories.png"> 
      <figcaption> 
       <span> 
       test3 
       </span> 
      </figcaption> 
      <!--/post item wide --> 
      </figure> 
     </div> 
     <div class="test col-sm-4 col-md-4 col-lg-3" style=" display: table-cell;  margin: 0 auto;"> 
      <figure> 
      <img alt="" src="assets/icons/make-them-yours.png"> 
      <figcaption> 
       <span> 
       test 1 
       </span> 
      </figcaption> 
      </figure> 
     </div> 
     <div class="test col-sm-4 col-md-4 col-lg-3" style=" 
display: table-cell; 
margin: 0 auto;"> 
      <figure> 
      <img alt="" src="assets/icons/show-it-off.png"> 
      <figcaption> 
       test2 
      </figcaption> 
      </figure> 
     </div> 
     <div class="clear"></div> 
     </div> 

Теперь мой вызов состоит в том, что я не могу центрировать эти элементы. Я пробовал использовать margin: 0 auto, делая их table-table-cell, и даже попробовал трюк inline-block. Но ничего не работает. Не могли бы вы помочь мне с этой благодарностью.

Вот ссылка на скрипку http://jsfiddle.net/WJ3U9/2/

Answer 1

вы пробовали text-align: center;?

Я думаю, что выравнивание по умолчанию остается!

вы можете попробовать его!

Answer 2

Первый

изменить ваш:

<div class="container clearfix row" style=" width: 100%; margin: 0 auto;"> 

в

<div class="container"> 

, потому что разметка неверно в первую очередь. Тогда,

добавить к вашей разметки CSS ..... (только что проверил его на широком экране, а не маленькие)

.test { 
    border:1px solid #000; 
    margin: 0 auto; 
    overflow:hidden; 
} 
figure > img { 
    width:100%; /* make image fit inside div*/ 
    height:auto; 
} 

demo here