如何在引導欄中將圖像與中心對齊？

Question

愚蠢的問題：我連續有三張圖片，但它們在其列的左側對齊。 如何將它們與列的中心對齊？

這是我的代碼：

 <div class="container partners">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="swz.png" alt="streetwize" class="img-circle" class="img-responsive" style="max-height:180px">
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="ogon.png" alt="ogon" class="img-circle" class="img-responsive" style="max-height:180px">  
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="congaz.png" alt="ogon" class="img-circle" class="img-responsive" style="max-height:180px">    
</div>
</div>

和CSS：

.partners {
display:block;
margin: 0 auto;
vertical-align:middle;
}

Answer 1

將text-center類添加到列div中

<div class="col-md-4 col-sm-4 col-xs-4 text-center">

Answer 2

首先你不能在同一個元素上寫2個class標簽

<img src="swz.png" alt="streetwize" class="img-circle" class="img-responsive" style="max-height:180px">

代替這個，你可以寫class="img-circle img-responsive"

對於居中對齊，您可以使用"text-center"類作為父div。或者您也可以應用style="float:none; margin:0 auto;" 到img。

謝謝，希望對您有幫助。

Answer 3

這個想法是使圖像block元素和邊距為auto。 但由於margin:auto不能工作，除非您分配了要素的某個寬度。

.partners img{
    display: block;
    margin: auto;
    text-align: center;
    width: 150px;
}

 .partners { display:block; margin: 0 auto; vertical-align:middle; } .partners img{ display: block; margin: auto; text-align: center; width: 150px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="container partners"> <div class="row"> <div class="col-md-4 col-sm-4 col-xs-4"> <img src="swz.png" alt="streetwize" class="img-circle" class="img-responsive" style="max-height:180px"> </div> <div class="col-md-4 col-sm-4 col-xs-4"> <img src="ogon.png" alt="ogon" class="img-circle" class="img-responsive" style="max-height:180px"> </div> <div class="col-md-4 col-sm-4 col-xs-4"> <img src="congaz.png" alt="ogon" class="img-circle" class="img-responsive" style="max-height:180px"> </div> </div> 

Answer 4

<div class="text-center">
<img src="swz.png" alt="streetwize" class="img-circle" class="img-responsive" style="max-height:180px">
</div>

它會反抗地工作。