Los elementos de alineación central han sido un tema muy discutido en CSS. Los principiantes y a veces, los profesionales a menudo se encuentran buscando en Google este tema cuando se atascan al intentar centrar la alineación de textos o elementos en CSS.
Encontré estos trucos entre líneas de un video. A partir de ese video, descubrí que la alineación central de los elementos en CSS depende claramente de:
- Elemento HTML a centrar.
- Elemento padre del elemento a centrar.
¿Qué tipo de elemento está alineando al centro? ¿Es en bloque o en línea?
¿Qué elemento debe diseñarse cuando se alinea al centro un elemento secundario, el elemento principal o el propio elemento secundario?
¿Cuáles son los estilos ya declarados de estos elementos (padre e hijo)? Eso es si hay alguno.
Hay diferentes formas de centrar la alineación de textos y elementos en CSS, pero no todas funcionarán para todos los elementos, por ejemplo
Una de las formas comunes de alinear elementos al centro es
text-align: center;
. Ahora prueba esta declaración CSS en un elemento div y luego en un elemento span.
Notarás que el elemento span no se mueve hacia el centro, esto se debe al tipo de elemento.
Ahora intenta agregar
display: block; text-align: center;
.
Lo que vas a notar es que se movió con éxito al centro. Estoy seguro de que ahora tienes curiosidad por saber por qué.
Formas de centrar los elementos en CSS.
Antes de enumerarlos, hay una forma poco común que los desarrolladores usan para centrar los elementos, es decir, con relleno.
No hago eso y no lo voy a decir aquí porque no lo necesitarías.
1. text-align – Textos alineados al centro
Es
text-align: center;
una forma muy común de centrar y alinear textos horizontalmente.
En este caso, alineamos un texto al centro de un elemento principal.
Entonces, básicamente, no importa el ancho de ese elemento (el elemento principal ahora), el texto interior se moverá absolutamente al centro de ese elemento.
Aquí hay algo sobre la alineación de texto, alinea cada texto en ese elemento. No importa si el texto está dentro de otro elemento.
por ejemplo
HTML
<div class="parent">Hello World</div>
CSS
.parent {
text-align: center;
}
Si el texto en el div está dentro de otro elemento de bloque.
Todavía centrará alinear el texto
HTML
<div class="parent">
<p class="child">Hello World</p>
</div>
CSS
.parent {
text-align: center;
}
.child {
border: 1px solid green;
}
Lo anterior es alinear al centro un texto, con la propiedad
text-align
también podemos alinear al centro un elemento. Pero este elemento debe ser un elemento en línea.
HTML
<div class="parent">
<span class="child">Hello World</span>
</div>
CSS
.parent {
text-align: center;
border: 2px solid red;
}
.child {
border: 4px solid green;
}
Nota:
No podemos centrar los textos alineados en un elemento en línea.
Esta propiedad solo se puede utilizar en un elemento de bloque. No puede funcionar en un elemento en línea porque el texto en un elemento en línea ya ocupa todo el ancho y alto del elemento. Entonces, ¿dónde lo centraremos?
HTML
<span class="parent">
Hello World
</span>
CSS
.parent {
text-align: center;
border: 2px solid red;
}
Si el texto de arriba está envuelto en un elemento de bloque, se alineará al centro pero tendrá un impacto negativo en el elemento principal. Así que no lo hagas.
No obstante, aún podemos centrar la alineación de los elementos en línea con el centro de un elemento principal (que tiene que ser un elemento de bloque) como se muestra arriba.
En pocas palabras, un elemento de bloque puede usar la propiedad de alineación de texto para alinear horizontalmente en el centro cualquier texto o elementos en línea dentro de él a su centro.
Puedes decir, ¿Y si quiero alinear verticalmente el texto al centro? Entonces diría que uses el siguiente consejo.
2. Margen: elementos de alineación central.
La declaración
margin: 0 auto;
o
margin: auto;
alineará horizontalmente un elemento con el centro de un elemento principal.
Esta propiedad se utiliza en el elemento hijo. Recuerde que el elemento secundario es lo que pretendemos alinear con el centro de un elemento principal.
HTML
<div class="parent">
<p class="child">Hello World</p>
</div>
CSS
.parent {
border: 2px solid red;
}
.child {
width: 200px;
margin: auto; /* or margin: 0 auto */
border: 4px solid green;
}
Redujimos el ancho del elemento secundario a 200 px para ver el efecto del efecto
margin: auto;
.
Además, el elemento a alinear al centro depende del elemento padre y para que esto funcione, también depende del tipo de elemento que sea el elemento principal y el elemento secundario.
El elemento secundario debe ser un elemento de bloque.
El elemento principal debe ser un elemento de bloque para que el elemento secundario se alinee con su centro.
Si el elemento principal no es un elemento de bloque, el elemento secundario se alineará con el centro del siguiente elemento principal (que es un elemento de bloque).
HTML
<body>
<span class="parent">
<p class="child">Hello World</p>
</span>
</body>
CSS
.parent {
border: 2px solid red;
}
.child {
width: 200px;
margin: auto; /* or margin: 0 auto */
border: 4px solid green;
}
En el código anterior, el siguiente elemento principal es el elemento
body
que es un elemento de bloque.
Lo que hemos estado haciendo es alinear horizontalmente los elementos al centro, con la propiedad
margin
también podemos alinearlos verticalmente.
HTML
<body>
<span class="parent">
<p class="child">Hello World</p>
</span>
</body>
CSS
.parent {
border: 2px solid red;
}
.child {
width: 200px;
margin: 100px auto; /* moves 100px from the top and bottom of the parent element */
border: 4px solid green;
}
Nota:
El ejemplo anterior ya no funcionará como se esperaba si se establece una altura para el elemento principal.
Establecer una altura solo para el elemento hijo seguirá alineando perfectamente el centro del elemento horizontal y vertical.
En pocas palabras, un elemento secundario (que es un elemento de bloque) puede usar la propiedad
margin
para centrar vertical y principalmente horizontalmente los elementos en el centro de un elemento principal (que debería ser un elemento de bloque).
Nuevamente, puede decir ¿Qué pasa si quiero establecer una altura para el elemento principal y al mismo tiempo, alinear el centro del elemento secundario con su centro? Yo diría que uses el siguiente consejo.
Sugerencia rápida para centrar elementos en línea.
En caso de que te preguntes cómo alinearías al centro los elementos en línea con la propiedad
text-align
y la propiedad
margin
, es tan simple como configurarlo en un elemento de bloque con la propiedad
display
. Es decir
.some-inline-element {
display: block;
}
3. Flexbox: Center align para alinear elementos y textos
Flexbox es una de las formas sólidas de alinear al centro un elemento o un texto, pero si tus elementos HTML no están bien posicionados, puedes terminar desanimado.
La declaración
display: flex;
funciona tanto en un bloque predeterminado como en un elemento en línea, ya que cambia ese elemento a un cuadro flexible.
Si no estás familiarizado con Flexbox, te recomiendo que sigas este tutorial, es un poco amplio, por lo que no explicaremos todos los aspectos en este artículo.
Centrar textos con flexbox
Un elemento flexbox puede alinear horizontalmente un texto en su centro.
Pero debe tener en cuenta que el ancho de este elemento: el elemento flexbox (que contiene el texto) es absoluto al ancho del elemento principal más cercano (que es un elemento de bloque).
HTML
<body>
<div class="parent">Hello World</div>
</body>
CSS
body {
width: 50%; /* will take up 50% of device's screen */
border: 2px solid red;
}
.parent {
display: flex;
justify-content: center; /* used to center align horizontally */
}
Para que quede claro, cuando
display: flex;
se utiliza sobre cualquier tipo de elemento:
- Primero se convierte ese elemento en un elemento flexbox.
- El texto dentro de ese elemento flexbox está alineado con el centro del elemento flex con la propiedad
justify-content: center;y el valor - Finalmente, el ancho del elemento flexbox depende del ancho de su elemento principal más cercano que es un elemento de bloque. Entonces, si el ancho de su elemento principal es el 50 % del ancho del dispositivo, el elemento flexbox será el 100 % del ancho del 50 % del principal. Esto sucede por defecto.
Alinee verticalmente los textos al centro usando flexbox.
Para alinear verticalmente, simplemente puede especificar la altura del elemento flexible y luego usar la propiedad
align-items
para alinear el texto verticalmente al centro.
HTML
<body>
<div class="parent">Hello World</div>
</body>
CSS
body {
width: 50%; /* will take up 50% of device's screen */
border: 2px solid red;
}
.parent {
height: 300px
display: flex;
justify-content: center; /* used to center align horizontally */
align-items: center; /* used to center align vertically */
}
De forma predeterminada, la altura de un elemento Flexbox no depende/se hereda del elemento principal. Puede hacer que herede utilizando el elemento
height:inherit
de flexbox.
Elementos de alineación central con Flexbox
Cuando se usa
display: flex;
en un elemento, cada elemento secundario se convertirá en un elemento de bloque en línea.
HTML
<body>
<div class="parent">
<span class="child">Hey World 1</span>
<div class="child">Hey World 2</div>
<span class="child">Hey World 3</span>
</div>
</body>
CSS
.parent {
display: flex;
justify-content: center;
border: 2px solid red;
}
.child {
padding: 100px 22px;
margin: 3px;
border: 2px solid green;
}
Al alinear al centro varios elementos con el centro de un elemento flexible, envuelva estos elementos múltiples con cualquier elemento (bloque o en línea).
HTML
<body>
<div class="parent">
<div class="child-wrapper">
<span class="child">Hey World 1</span>
<div class="child">Hey World 2</div>
<span class="child">Hey World 3</span>
</div>
</div>
</body>
CSS
.parent {
display: flex;
justify-content: center;
border: 2px solid red;
}
.child {
margin: 3px;
border: 2px solid green;
}
Sin envolver, tendrías los elementos apilados horizontalmente y aún alineados al centro.
HTML
<body>
<div class="parent">
<span class="child">Hey World 1</span>
<div class="child">Hey World 2</div>
<span class="child">Hey World 3</span>
</div>
</body>
CSS
.parent {
display: flex;
justify-content: center;
border: 2px solid red;
}
.child {
margin: 3px;
border: 2px solid green;
}
Nuevamente, de forma predeterminada, el ancho del elemento flexbox depende de su elemento principal, que es un elemento de bloque. Mientras que la altura no lo es.
Para alinear verticalmente al centro los elementos en el elemento flexbox, especificaremos una altura para el elemento flexbox junto con la propiedad
align-items
.
HTML
<body>
<div class="parent">
<span class="child">Hey World 1</span>
<div class="child">Hey World 2</div>
<span class="child">Hey World 3</span>
</div>
</body>
CSS
.parent {
height: 300px;
display: flex;
justify-content: center;
border: 2px solid red;
}
.child {
margin: 3px;
border: 2px solid green;
}
También puedes heredar la altura del elemento principal del elemento flexbox con
height: inherit;
declarado para el elemento flexbox.
En pocas palabras, un elemento en línea o de bloque (como elemento principal) puedes usar la propiedad
display
para alinear un texto o elemento vertical y horizontalmente con su centro.
4. Posicionar y transformar: elementos y textos alineados al centro
La propiedad de posición también es una excelente manera de centrar elementos alineados. Lo uso principalmente cuando estoy creando un elemento fijo o un menú desplegable.
En este formato, necesitaría diseñar prácticamente el elemento principal y el elemento secundario: se colocará en el medio del elemento principal.
El elemento principal deberá mostrar en su CSS que es el elemento en el que desea que el elemento secundario esté en el medio y lo muestra configurando la propiedad de posición del elemento principal en
fixed
o
relative
.
HTML
<body>
<div class="parent">
<some-element>Some text</some-element>
</div>
</body>
CSS
.parent {
position: relative;
}
El elemento secundario deberá establecerse en
absolute
la posición del elemento principal. Lo que esto significa es que el ancho, la altura y la posición del elemento secundario ahora dependen del elemento principal.
HTML
<body>
<div class="parent">
<p class="child">Hello World</p>
</div>
</body>
CSS
.parent {
position: relative;
}
.child {
position: absolute;
}
Ahora intentemos alinearlo al centro. Usamos la propiedad de posición así como la propiedad de transformación en el elemento secundario para hacer esto:
HTML
<body>
<div class="parent">
<p class="child">Hello World</p>
</div>
</body>
CSS
.parent {
position: relative;
height: 100px;
border: 2px solid red;
}
.child {
position: absolute;
left: 50%; /* adjusts the element 50% from the left */
transform: translateX(-50%); /* horizontally re-adjusts the element to the center */
}
El primer parámetro posiciona el elemento horizontalmente y el otro verticalmente.
HTML
<body>
<div class="parent">
<p class="child">Hello World</p>
</div>
</body>
CSS
.parent {
position: relative;
height: 100px;
border: 2px solid red;
}
.child {
position: absolute;
left: 50%; /* adjusts the element 50% from the left */
top: 50%; /* adjusts the element 50% from the top */
transform: translate(-50%, -50%); /* horizontally & vertically re-adjusts the element to the center */
}
eso es todo, las cuatro formas indomables de centrar elementos o textos alineados vertical u horizontalmente en CSS.
Caso de uso
Prácticamente usemos esto en una página web. En esta sección, probaremos cada caso (mencionado anteriormente) para tratar de alinear al centro un elemento, que contendrá un texto.
NOTA: Tenga en cuenta que dondequiera que especifique o pueda haber especificado elementos en este artículo, en realidad incluye todos los elementos como imágenes, entrada.
También debe tener en cuenta que los ejemplos en los que indicamos por qué algunos elementos no se alinearían al centro porque es un elemento en línea. Y he dicho que la solución es no hacerlo en línea.
Hagamos algo…
Digamos que tenemos un encabezado que queremos fijar en la parte superior de nuestra página web, y en este encabezado habrá un elemento h1 que contendrá el nombre de nuestra página web.
<header>
<h1>Dashboard</h1>
</header>
Ahora lo que queremos hacer es alinear al centro el elemento h1. ¿Cómo harías esto?
Primero, fijemos el encabezado y agreguemos un borde.
header {
position: fixed;
border: 4px solid orange;
}
Ahora vamos a centrar la alineación del texto porque el elemento principal es fijo, por lo general haría que el h1 sea absoluto y luego lo alinearía al centro con la propiedad de transformación.
Pero por el bien de este tutorial, probemos todos los consejos enumerados.
1. Intente usar la propiedad
center-align
en el elemento principal (el elemento de encabezado):
Intentaría esto porque el elemento principal es un elemento de bloque y el elemento secundario es un elemento de bloque que contiene un texto que queremos alinear al centro.
¿Qué piensas? ¿Va a funcionar? Por supuesto, lo haría. Si lo intenta ahora, funcionará pero no se reflejará.
Esto se debe a que, de forma predeterminada, cuando especificamos que un elemento tenga una posición fija, el ancho del elemento se reduce al ancho del texto que contiene.
header {
position: fixed;
border: 4px solid orange;
text-align: center;
}
Lo que tenemos que hacer ahora es darle un ancho completo
header {
position: fixed;
right: 0;
left: 0;
border: 4px solid orange;
text-align: center;
}
2. Intenta usar la propiedad
margin
en el elemento h1:
Intentaría esto porque cumple con la condición de la propiedad de margen y es que el elemento principal sea un bloque y el elemento secundario sea un elemento de bloque.
header {
position: fixed;
right: 0;
left: 0;
border: 4px solid orange;
}
h1 {
margin: 0 auto;
}
Aunque nuestra página web cumple con la condición, todavía no funciona y probablemente se deba a la propiedad de posición.
3. Intenta usar flexbox en el elemento principal (el elemento de encabezado):
header {
position: fixed;
right: 0;
left: 0;
border: 4px solid orange;
display: flex;
justify-content: center;
}
Esto funcionaría bien como se esperaba.
4. Intenta usar las propiedades de posición y transformación en el elemento h1:
header {
position: fixed;
right: 0;
left: 0;
border: 4px solid orange;
height: 80px;
}
h1 {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Funciona bien porque el elemento principal ya muestra que es el elemento principal y, por lo tanto, el elemento secundario solo necesita moverse al centro de su padre (o madre).
Esta es una página web muy básica, es posible que las páginas o secciones complejas no siempre terminen así: tener tres casos funciona perfectamente.
Pero no importa el caso, trata de pensar siempre así; ¿Satisface la condición de alineación de texto, si no se mueve al siguiente? Como eso.
Entonces, en lugar de intentarlo primero para ver si se alinearía al centro, simplemente puede usar su cerebro para saber si va a funcionar.
Conclusión
Con este artículo, centrar elementos o textos en CSS puede y nunca debería ser un problema para ti. Lo que te recomiendo que hagas ahora es practicar, puedes practicar no solo desde cero sino también a partir de problemas.