Responsive image alignment with Bootstrap

Question

Responsive image alignment with Bootstrap

Navigation

#1 by (4 votes)

1

I'm having a hard time aligning a responsive Bootstrap image.

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

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

Can someone help me? 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>

html html5 css css3 bootstrap-3

asked by anonymous 03.10.2015 / 08:19

1 answer

How to sort an alphabetized list alphabetically? What's the difference between creating a Socket via SocketFactory and creating one with new Socket?

score 4 · Accepted Answer

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

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

In my understanding you are 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 to create the CSS code as follows:

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

In this way everything within the .text-center class will be aligned to the center, and this style will only be applied to the .img-responsive class if it is within the .text-center class as is the case with your code HTML, giving you the option of being able to use the class .img-responsive freely in both ways, use it in the default way, or centralized by adding the class .text-center to div parent to trigger its centralization.

You have here an ONLINE EXAMPLE ON JSFIDDLE of the code in action.