Horizontally center a responsive image in Bootstrap

Question

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>

Answer 1

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