Los «bloques» son conocidos por ocupar espacio de línea completo, lo que obliga a otros elementos a comenzar en una nueva línea. En otras palabras, tienen un ancho del 100% de la página web o contenedor que contiene el bloque. En este artículo vamos a ver cómo bloquear elementos que normalmente se comportan y cómo centrarlos usando CSS.
Comportamiento de elementos de bloque: cualquier elemento se puede configurar para que se comporte como un bloque configurando su propiedad de visualización en el bloque «display: block». Hay algunos otros elementos como encabezados, etiquetas div que están bloqueadas por defecto. Entonces toman la línea completa o el ancho completo de la página web o el contenedor que lo contiene. Incluso si nuestro contenido ocupa el 20% del ancho de la página web, la propiedad de bloque reservará el 100% del ancho total de la página web o el contenedor que lo contiene.
Cómo centrar estos elementos de bloque: Hemos visto cómo se comporta este elemento de bloque, observamos que como toman ancho de línea completo, para centrarlos solo tenemos la propiedad de margen que los está controlando horizontalmente.
El margen puede controlar la posición del elemento de bloque tanto horizontal como verticalmente. Para centrarlos, podemos ajustar la propiedad de margen para que se coloque en el centro.
Nota: Podemos ver que «text-align: center» no está centrando los elementos del bloque. Solo están centrando los elementos que no son de bloque o de bloque en línea.
Centrar elementos de bloque usando la propiedad de margen: Necesitamos especificar el margen de izquierda a derecha para que se vea centrado. No necesitamos hacer esto manualmente, tenemos un valor de propiedad «automático» que establecerá automáticamente el margen de modo que nuestro elemento de bloque se coloque en el centro. Use la propiedad CSS a continuación para centrar su elemento de bloque.
margin: auto
Ejemplo 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<style>
h2,
p {
text-align: center;
}
.myblock {
margin: auto;
border: 2px solid red;
width: fit-content;
padding: 15px;
text-align: center;
background-color: lightyellow;
}
header {
font-size: 40px;
background-color: lightgreen;
margin: auto;
width: fit-content;
}
.myinline {
padding: 10px;
border: 2px solid blue;
}
.holder {
text-align: center;
}
</style>
</head>
<body>
<h2>Welcome To GFG</h2>
<p>Default code has been loaded into the Editor.</p>
<header>hello</header>
<div class="myblock">
div who has default display : block
</div>
<div class="holder">
<div style="display: inline-block" class="myinline">
inline block paragraph 1
</div>
<div style="display: inline-block" class="myinline">
inline block paragraph 2
</div>
</div>
</body>
</html>
Producción:
bloque centrado
Ejemplo 2: tenemos una imagen que tiene algo de espacio a su alrededor, por lo que, de forma predeterminada, el elemento que no es de bloque aparecerá junto a la etiqueta img y no en la siguiente línea. Después de configurar la propiedad «display: block», podemos hacer que nuestra imagen bloquee el elemento. Se puede centrar usando la propiedad “margin: auto”.
Nota: La etiqueta del cuerpo se ha establecido en la propiedad «text-align: center» . Sabemos que no está afectando a los elementos del bloque.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
header {
font-size: 20px;
margin: auto;
width: 30%;
background-color: lightgreen;
margin-bottom: 10px;
}
p {
display: inline-block;
}
img {
display: block;
margin: auto;
}
</style>
</head>
<body>
<header>
centering image using display: block
</header>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210810104012/geeksimage.png"
alt="image here" width="500" height="400" />
<p>
paragraph came to the new line even
if it is inline, because the img is
set to block
</p>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por jymnjogiya y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA