Original article: How to Center an Image Using Text Align: Center
Un elemento <img>
es un elemento en línea (el valor display de inline-block
). Puede ser fácilmente centrado añadiendo el text-align: center;
propiedad CSS al elemento padre que lo contiene.
Para centrar una imagen usando text-align: center;
debes colocar el <img>
dentro del elemento de nivel de bloque como es un div
. Ya que la propiedad text-align
solo aplica a los elementos nivel de bloque, coloque text-align: center;
encerrar dentro del elemento nivel de bloque para lograr un<img>
un centrado horizontal.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Center an Image using text align center</title>
<style>
.img-container {
text-align: center;
}
</style>
</head>
<body>
<div class="img-container"> <!-- Block parent element -->
<img src="user.png" alt="John Doe">
</div>
</body>
</html>
Nota: El elemento padre debe ser un elemento de bloque. Si no es un elemento de bloque, deberías añadir display: block;
propiedad de CSS junto con la propiedad text-align
.
<!DOCTYPE html>
<html>
<head>
<title>Center an Image using text align center</title>
<style>
.img-container {
text-align: center;
display: block;
}
</style>
</head>
<body>
<span class="img-container"> <!-- Inline parent element -->
<img src="user.png" alt="">
</span>
</body>
</html>
Demo: Codepen
Ajuste de objeto
Una vez que la imagen es centrada, es posible que desee cambiar el tamaño. La propiedad object-fit
específica como un elemento responde al ancho/altura del box padre.
Esta propiedad puede ser usada para imagen, video, o cualquier otro medio. También puede ser usado con la propiedad object-position
para obtener más control en como el medio es mostrado.
Básicamente, usamos la propiedad object-fit
para definir como alargar o encoger un medio inline.
Sintaxis
.element {
object-fit: fill || contain || cover || none || scale-down;
}
Valores
fill
: Este es el valor predeterminado. Cambie el tamaño del contenido para que coincida con su box padre, independientemente de la relación de aspecto.contain
: Cambie el tamaño del contenido para llenar el box padre usando el apropiado aspect-radio.cover
: Similar acontain
pero a menudo recortando el contenido.none
: Muestra la imagen a su tamaño original.scale-down
: Compara la diferencia entrenone
ycontain
para encontrar el tamaño de objeto concreto más pequeño.
Compatibilidad del buscador
El object-fit
es soportado por la mayoría de los buscadores modernos, para información más actualizada acerca de compatibilidad puedes ver esto en http://caniuse.com/#search=object-fit.