引導程序3將浮動列對齊到中心

Question

我在引導程序中顯示帶有3行的信息塊。我使用自舉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