1.9 KiB
1.9 KiB
| title | localeTitle |
|---|---|
| Center an Image Using Text Align Center | Centrar una imagen usando el centro de alineación de texto |
Centrar una imagen usando el centro de alineación de texto
Un elemento <img> es un elemento en línea (muestra el valor del inline-block ). Se puede centrar fácilmente agregando el text-align: center; Propiedad CSS al elemento padre que lo contiene
Para centrar una imagen usando text-align: center; debe colocar <img> dentro de un elemento de nivel de bloque, como un div . Dado que la propiedad text-align solo se aplica a los elementos de nivel de bloque, coloca text-align: center; en el elemento de nivel de bloque de envoltura para lograr un <img> centrado horizontalmente.
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, debe agregar display: block; Propiedad 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