En este artículo, veremos cómo hacer que los elementos a nivel de bloque estén en el centro usando CSS.
Enfoque: hay dos pasos para centrar un elemento a nivel de bloque:
Paso 1: Definir el ancho externo: necesitamos definir el ancho externo. Los elementos a nivel de bloque tienen el ancho predeterminado del 100 % de la página web, por lo que para centrar el elemento de bloque, necesitamos espacio a su alrededor. Entonces, para generar el espacio, le estamos dando un ancho.
Paso 2: establezca el margen izquierdo y el margen derecho del elemento en automático: dado que producimos un espacio restante al proporcionar un ancho externo, ahora debemos alinear ese espacio correctamente, es por eso que debemos usar la propiedad de margen. El margen es una propiedad que indica cómo alinear un espacio restante. Entonces, para centrar el elemento, debe configurar el margen izquierdo en automático y el margen derecho en automático.
Sintaxis:
element {
width:200px;
margin: auto;
}
Los siguientes ejemplos representan cómo centrar elementos a nivel de bloque.
Ejemplo 1: Aquí un solo elemento (div) está centrado dentro del cuerpo.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
margin:0px;
padding:0px;
box-sizing: border-box;
}
body {
background: brown;
}
#box {
background: black;
color:white;
text-align: center;
}
/* For centering the element */
#box {
width:300px;
margin:10rem auto;
}
</style>
</head>
<body>
<div id="box">
<h3>this is a box</h3>
</div>
</body>
</html>
Producción:
Ejemplo 2: Aquí hemos centrado dos elementos uno tras otro dando la altura y el ancho externos.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
margin:0px;
padding:0px;
box-sizing: border-box;
}
body {
background: cadetblue;
}
.box {
background: rgb(4, 2, 32);
color: #eee;
text-align: center;
width: 500px;
height: 200px;
margin:1rem auto;
}
</style>
</head>
<body>
<div id="box1" class="box">
<h3>this is a box1</h3>
</div>
<div id="box1" class="box">
<h3>this is a box2</h3>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por nachiketmh7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA