如何在引導列中將DIV與backround居中？

我正在使用bootstrap3並具有包含背景圖像的DIV。這些DIV位於列中，我想將它們居中。如何在引導列中將DIV與backround居中？

我有以下HTML：

<div id="badges"> 


      <div class="col-xs-6 col-sm-6 col-md-2 col-lg-2 badge-container center-block">    
       <div id="badge1" class="center-block"></div> 
      </div> 


      <div class="col-xs-6 col-sm-6 col-md-2 col-lg-2 badge-container center-block"> 
       <div id="badge2" class="center-block"></div> 
      </div> 


      <div class="col-xs-6 col-sm-6 col-md-2 col-lg-2 badge-container center-block"> 
       <div id="badge3" class="center-block"></div> 
      </div> 


      <div class="col-xs-6 col-sm-6 col-md-2 col-lg-2 badge-container center-block"> 
       <div id="badge4" class="center-block"></div> 
      </div> 


</div>

我的DIV的每個人都有一個背景IMG（這裏是我在更少的代碼）

#badges{ 


    .badge-container{ 


     height: 5em; 


     #badge1{ 
      height:100%; 
      width: auto; 

      background-image: url("images/badge1.JPG"); 
      background-size: contain; 
      background-repeat: no-repeat;       
     } 


     #badge2{ 
      height:100%; 
      width: auto; 

      background-image: url("images/badge2.JPG"); 
      background-size: contain; 
      background-repeat: no-repeat;   
     } 



     #badge3{ 
      height:100%; 
      width: auto; 

      background-image: url("images/badge3.PNG"); 
      background-size: contain; 
      background-repeat: no-repeat;   
     } 


     #badge4{ 
      height:100%; 
      width: auto; 

      background-image: url("images/badge4.JPG"); 
      background-size: contain; 
      background-repeat: no-repeat;   
     }  

    } 


}

我曾試圖彌補的div居中（也加入了class =「center-block」，但它不起作用。

我該如何讓這些DIV集中？

個

感謝

來源

2015-09-06 Greg

這裏是一個Codepen什麼，我想你想

引導http://codepen.io/noobskie/pen/ojgrJX?editors=110有一類稱爲col-*-offset-*，你可以的情況下，使用您的列不等於達到滿格尺寸

您可以使用的另一種方法是自動方式，並將float:none;添加到自定義類別

此處更詳細地解釋Center a column using Twitter Bootstrap 3

編輯去除多餘"center-block"類

來源

2015-09-06 13:37:54 NooBskie

感謝給特定寬度的div，但沒有工作。沒有變化。附：爲什麼要刪除「中心塊」課程？這個班不應該集中這個div嗎？爲什麼它會這樣？ – Greg

float:none; 
margin:0 auto;

對於每一個div的，你想中心不要忘記根據圖像寬度

來源

2015-09-06 14:14:26 EfiBN

謝謝，但沒有奏效。沒有變化。 – Greg

如何在引導列中將DIV與backround居中？

回答

相關問題