0

Achei que o problema era simples, mas não consigo de forma alguma centralizar uma imagem que está dentro de uma div. Tenho imagens de tamanhos variados e gostaria de centralizá-las horizontalmente, porém não consigo utilizar a propriedade margin: 0 auto;. Meu código:

#wrapper {
    width:90%;
    height:300px;
    margin:0 auto;
}

#wrapper div {
    width:100%;
    height:100%;
    overflow:hidden;
}

img {
    display:block;
    margin:0 auto;
}
<div id="wrapper">
    <div>
        <img src="http://placehold.it/900x300"/>
    </div>
</div>

Sim, a div "wrapper" é necessária. Eu estive pesquisando por ai e lembrei que posso utilizar a propriedade transform, porém gostaria de uma solução menos "radical". Também tentei colocar text-align:center; na div comum e display:inline-block; na imagem, porém sem resultados positivos também.

5 Respostas 5

1

Creio que utilizar a propriedade flex resolva.

.wrapper {
    display: -webkit-flex;
     display: -ms-flexbox;
            display: flex;
    justify-content: center;
    width: 100%;
}
<div class='wrapper'>
    <img src='http://placehold.it/900x300' alt=''>
</div>

Como não defini uma largura para a imagem e o div pai possui largura de 100%, a imagem irá se ajustar conforme o div wrapper ter seu tamanho alterado, isso quer dizer que se você redimensionar a tela para um tamanho menor consequentemente a imagem também será afetada. // TODO: teste você mesmo...

Se for necessário definir um tamanho mínimo ou máximo para a imagem pode utilizar as propriedades max-width e/ou min-width.

Mas nada impede você de trabalhar com px, vide exemplo:

.wrapper {
   display: -webkit-flex;
    display: -ms-flexbox;
           display: flex;
    justify-content: center;
    width: 100%;
}

img {
    width: 300px
}
<div class='wrapper'>
    <img src='http://placehold.it/900x300' alt=''>
    
    <!--- se quiser testar colocando outras duas (ou mais) imagens...
    <img src='http://placehold.it/900x300' alt=''>
    <img src='http://placehold.it/900x300' alt=''>
    -->
</div>

Link útil

4
  • A imagem precisa ficar com a largura original Commented 18/04/2015 às 19:26
  • @RafaelAlmeida como eu disse na resposta, basta usar min-width e/ou max-width na imagem. Commented 18/04/2015 às 20:05
  • As imagens tem larguras diferentes, não seria cabível estimular uma largura mínima ou máxima, senão a qualidade das mesmas seriam modificadas. Commented 18/04/2015 às 20:54
  • @RafaelAlmeida uma hora você terá que definir um limite para a imagem. De qualquer forma, fica aí a sugestão. Commented 18/04/2015 às 21:06
0

Faltou o position:relative dentro da div. :)

Seria algo assim?

#wrapper {
    width:90%;
    margin:0 auto;
    border:1px solid red;
}

#wrapper div {
    position:relative;
    width:100%;
    text-align:center;
}
<div id="wrapper">
    <div>
        <img src="http://placehold.it/100x300"/>
         <img src="http://placehold.it/120x150"/>
         <img src="http://placehold.it/140x200"/>
    </div>
</div>

1
  • Dessa forma funciona se a imagem for menor que a div pai, porém meu problema é que ela é maior. Commented 18/04/2015 às 5:17
0

Ola amigo tenta assim :

<center>
<div id="wrapper">
    <div>
        <img src="http://placehold.it/100x300"/>
         <img src="http://placehold.it/120x150"/>
         <img src="http://placehold.it/140x200"/>
    </div>
</div>
</center>

talvez funcione.

0

A unica solução que vejo neste caso é usar position: relative; com margem negativa (será necessário adicionar mais um elemento):

#wrapper {
    width:90%;
    height:300px;
    margin:0 auto;
    border: 1px #f00 solid;
}

#wrapper div.main-container {
    width:100%;
    height:100%;
    overflow:hidden;
}
#wrapper div.inner-container {
    margin-left: 50%;
}
#wrapper div.main-container img {
    position: relative;
    width: 900px;
    margin-left: -450px;
}
<div id="wrapper">
    <div class="main-container">
    <div class="inner-container">
        <img src="http://placehold.it/900x300"/>
    </div>
    </div>
</div>

O elemento div.inner-container adiciona 50% da medida a margem esquerda (o que é necessário para o efeito) e o elemento img retira 450px da margem a esquerda pois 450px é a metade da largura da imagem.

Note que a bordar vermelha é só para perceber o teste.

0

Também dá para usar:

.centralizado{
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

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 .