En este artículo, sabremos cómo alinear al centro la imagen en la etiqueta div usando CSS y también entenderemos su implementación a través del ejemplo. Dada una imagen, debemos configurar la imagen que se alinea con el centro (vertical y horizontalmente) dentro de un div más grande. Se puede hacer usando la propiedad de posición del elemento.
Ejemplo 1: este ejemplo usa la propiedad de posición para hacer que la imagen se alinee al centro.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Horizontal and Vertical alignment</title>
<!-- Style to set horizontal and
vertical alignment -->
<style>
#Outer {
border: 2px solid black;
height: 300px;
position: relative;
}
img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div id="Outer">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211101104133/1-300x139.png" />
</div>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo usa la propiedad center para establecer la imagen en el centro en un div. También podemos usar este método para alinear el elemento al centro.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Horizontal and Vertical alignment </title>
<style>
#Outer {
border: 2px solid black;
height: 300px;
background: url(
https://media.geeksforgeeks.org/wp-content/uploads/20211101104133/1-300x139.png)
no-repeat center center;
}
</style>
</head>
<body>
<div id="Outer"></div>
</body>
</html>
Salida: desde la salida, podemos ver que la salida es la misma que la salida anterior.
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA