¿Centrar la imagen usando el centro de alineación de texto?
¿ Es la propiedad text-align: center;una buena forma de centrar una imagen usando CSS?
img {
text-align: center;
}
Aceptado
Eso no funcionará ya que la text-alignpropiedad se aplica a contenedores de bloques, no a elementos en línea, y imges un elemento en línea. Consulte la especificación W3C .
Utilice esto en su lugar:
img.center {
display: block;
margin: 0 auto;
}<div style="border: 1px solid black;">
<img class="center" src ="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">
</div>Expandir fragmento
Eso no siempre funciona... si no funciona, intenta:
img {
display: block;
margin: 0 auto;
}
Me encontré con esta publicación y funcionó para mí:
img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}<div style="border: 1px solid black; position:relative; min-height: 200px">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">
</div>Expandir fragmento
(Alineación vertical y horizontal)
