1

Estou com dificuldade de alinhar ao centro uma imagem responsiva do Bootstrap.

Minha imagem está com a classe (.img-responsive) devidamente aplicada e inserida dentro de uma row e duma div com a classe .col-md-12.

No momento que aplico a classe .img-responsive, a classe .text-center deixa de fazer efeito e a imagem fica alinhada à esquerda.

Alguém consegue me dar uma ajuda? Desde já agradeço.

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

1 Resposta 1

6

Isso acontece porque a class .img-responsive adiciona a propriedade - display:block; à imagem.

Para resolver isso e fazer com que um elemento com display:block; seja alinhado ao centro terás que adicionar ao mesmo uma - margin:0 auto;, que neste caso este estilo, será implementado à class - .img-responsive.

No meu entender estás a utilizar a class .text-center não só para alinhar a imagem ao centro mas principalmente para alinhar textos, certo? Então o que podes fazer aqui é criar o código CSS da seguinte maneira:

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

Desta forma tudo o que estiver dentro da class .text-center será alinhado ao centro, e este estilo será apenas aplicado à class .img-responsive caso esta esteja dentro da class .text-center como é o que acontece no caso do teu código HTML, dando assim a opção de poderes usar a class .img-responsive livremente das duas maneiras, usá-la do modo padrão, ou centralizada adicionando a class .text-center como div parent para accionar a sua centralização.

Tens aqui um EXEMPLO ONLINE NO JSFIDDLE do código em ação.

2
  • 1
    Perfeito Chun. É exatamente isso. Muito obrigado pela ajuda. Commented 7/10/2015 às 19:41
  • 1
    Funcionou certinho para mim, Chun. Muito obrigado! Commented 15/10/2019 às 15:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .