CODEWITHSUNDEEP
htmlcssimagetwitter-bootstrapvertical-alignment
user3156716
user3156716

Reputation: 27

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

Upvotes: 1

Views: 11322

Answers (4)

Subodh Sharma
Subodh Sharma

Reputation: 303

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

it would work defiantly.

Upvotes: 0

Anil Kumar Ram
Anil Kumar Ram

Reputation: 1221

First of all you can not write 2 class tag on same element

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

instead of this you can write class="img-circle img-responsive"

for center aligning u can use "text-center" class to parent div.. or you can also apply style="float:none; margin:0 auto;" to img.

thanks, hope this will help you.

Upvotes: 1

Suman KC
Suman KC

Reputation: 3528

The idea is to make image block element and margin of auto. but as the margin:auto won't work except you assign some width of the elemet.

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

Upvotes: 0

potatopeelings
potatopeelings

Reputation: 41075

Add the text-center class to your column divs

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

Upvotes: 2

Related Questions