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.