CODEWITHSUNDEEP
csstwitter-bootstrap
Jabran Rafique
Jabran Rafique

Reputation: 363

Horizontally center a responsive image in Bootstrap

If an image with .img-responsive class has less width than the container width then it displays as aligned to left. Adding .text-center to parent element does not seem to work. Here is an example:

<div class="col-sm-12 text-center">
  <img src="path/to/image.jpg" alt="Example Image" class="img-responsive" />
</div>

Upvotes: 5

Views: 28521

Answers (3)

BENARD Patrick
BENARD Patrick

Reputation: 30975

If you really want to follow the twitter bootstrap synthax, you should use the center-block class as explained in the documentation.

Link to the documentation

Kind of code :

<img class="center-block" src="something.xxx" alt="xxx">

Upvotes: 9

Tushar
Tushar

Reputation: 87203

You can use text-align property on it's parent element

.text-centre {
    text-align: center;
}

Upvotes: 1

Jabran Rafique
Jabran Rafique

Reputation: 363

This is because .img-responsive class has its CSS display property set to block. Adding .img-responsive { display: inline-block; } in user stylesheet will solve the issue by overriding the original value and image will display as centred.

Here is CSS:

.img-responsive {
  display: inline-block;
}

Here is HTML:

<div class="col-sm-12 text-center">
  <img src="path/to/image.jpg" alt="Example image" class="img-responsive" />
</div>

Upvotes: 9

Related Questions