Responsive image alignment with Bootstrap

Question

I’m having trouble aligning a responsive Bootstrap image to the center.

My image is with class (.img-responsive) properly applied and inserted into a row and of div with class .col-md-12.

When I apply the class .img-responsive, the class .text-center no effect and the image is aligned to the left.

Can anyone give me a hand? Thanks in advance.

<div class="container">
    <div class="row">
        <div class=" col-md-12 text-center">
            <img class="img-responsive" src="img/quadro-picnic.png" alt="Imagem"/>
        </div>              
    </div>
</div>

Answer 1

This happens because the class .img-responsive adds the property - display:block; in the image.

To solve this and make an element with display:block; be aligned to the center you will have to add to it a - margin:0 auto;, that in this case this style will be implemented to the class - .img-responsive.

As far as I’m concerned, you’re using the class .text-center not only to align the image to the center but mainly to align texts, right? So what you can do here is create the CSS code as follows:

.text-center .img-responsive {
    margin: 0 auto;
}

This way everything inside the class .text-center will be aligned to the center, and this style will only be applied to the class .img-responsive if this is within the class .text-center as is the case for your HTML code, thus giving you the option to use the class .img-responsive freely of both ways, use it in the standard mode, or centralized by adding the class .text-center as div parent to activate its centralisation.

You got a ONLINE EXAMPLE ON JSFIDDLE of the code in action.