Search code examples
htmlcssimagetwitter-bootstrapvertical-alignment

How can I align an image to the center in a Bootstrap column?

Stupid question: I have three images in a row, but they are aligned to the left in their column. How can I align them to the center of the column?

This is my code:

 <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>

And CSS:

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

  • Add the text-center class to your column divs

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