Alineación vertical CSS: consejos y técnicas

¿Te gustaría aprender Diseño Web?
Tenemos los cursos que necesitas.¡Haz clic aquí!

Mientras CSS ha existido, centrar elementos verticalmente siempre ha sido una tarea frustrante para muchos desarrolladores web front-end.

A diferencia de las alineaciones horizontales, que se pueden lograr fácilmente utilizando la text-alignpropiedad, las alineaciones verticales son a menudo mucho más difíciles de poner en acción.

Hoy en día, centrar texto verticalmente o cualquier elemento que use CSS es una tarea simple. Este artículo muestra varias técnicas de alineación vertical CSS: usar un Flexbox, usar posicionamiento + transformación, usar relleno vertical y usar altura de línea.

CSS Vertical Align usando Flex

Introducido con la especificación CSS3, la display: flexpropiedad / valor facilita el diseño de estructuras flexibles de diseño receptivo sin usar flotadores o posicionamiento.

Junto con display:flex, puede nada fácil alineación de celdas de la tabla de Elementos en línea con las align-items, align-selfy justify-contentpropiedades.

Para la parte HTML, solo necesitamos un contenedor simple, así que consideremos lo siguiente:

<div class = "alinear verticalmente">
  Estoy centrado verticalmente!
</div>

Aquí está el código CSS para centrar verticalmente el texto:

.align-verticalmente {
  fondo: # 13b5ea;
  color: #fff;
  pantalla: flex;
  alinear elementos: centro;
  altura: 200 px;
}

Vamos a ver cómo funciona:

• En la línea 4 del código CSS, defino la pantalla como flex, que habilita el diseño de flexbox para el contenedor.
• La línea 5 centra verticalmente el texto en el cuadro flexible, utilizando la align-itemspropiedad CSS y centercomo valor.

Esta técnica es muy confiable y funciona bien en un contexto de diseño web receptivo . Desafortunadamente, CSS Flexbox no es compatible con IE9 y versiones anteriores.

Alineación vertical CSS con la propiedad Transformar

Esta es una técnica interesante, ya que le permite centrar fácilmente cualquier elemento HTML verticalmente: párrafos, imágenes, etc.

Para que funcione, necesitamos dos contenedores en nuestro HTML: Los siguientes ejemplos usan a divcomo padre y un párrafo que contiene el texto que quiero alinear verticalmente:

<div class = "vertical-align">
  <p> ¡Estoy centrado! </p>
</div>

Aquí está el código CSS relacionado, que hará que nuestro párrafo se centre verticalmente (y horizontalmente):

.vertical-align { 
  color: #fff;
  altura: 200 px;
  posición: relativa;
  fondo: # 13b5ea; 
}

.vertical-align p {
  margen: 0;
  posición: absoluta;
  arriba: 50%;
  izquierda: 50%;
  transformar: traducir (-50%, -50%);
}

Echemos un vistazo a las propiedades utilizadas para que funcione:

• La .vertical-alignclase define una altura fija de 200 px. Esto se puede cambiar para adaptarse a las necesidades de su sitio. Además, tenga en cuenta el uso de position: relative, que se utiliza para evitar problemas de visualización del elemento secundario, que tiene un position: absolutedefinido.
• El elemento secundario ( .vertical-align p) usa a top: 50%;para mostrar el párrafo al 50% de la parte superior del elemento principal. Esto solo no centrará el contenido verticalmente.
• La transformpropiedad en la línea 13 se usa para compensar el espacio extra creado por ambos topy left.

Esto es lo que he usado para hacer que el título de la publicación de WebDevBlog esté centrado verticalmente. Es una técnica simple, rápida y eficiente. El único problema es que la transformpropiedad no es compatible con IE8 y versiones anteriores.

Alineación vertical CSS con relleno vertical

Usando relleno, podemos crear un texto centrado. Esta técnica es muy utilizada, por ejemplo, al crear botones y elementos del menú de navegación.

Considere este simple bit de HTML a continuación:

<div class = "vertical-align">
  Me veo centrado!
</div>

Aquí está la clase CSS que estamos usando:

.vertical-align {
  fondo: # 13b5ea;
  color: #fff;
  radio de borde: 5px;
  ancho: 200 px;
  alinear texto: centro;
  acolchado: 2rem 0;
}

Como puede ver, especifiqué un relleno superior e inferior de 2 rems (en la línea 7). Esto crea espacio en la parte superior e inferior del elemento, que se verá centrado verticalmente.

Alineación vertical CSS con altura de línea

Esta técnica es muy similar a la técnica de relleno explicada anteriormente. La única diferencia es que line-heightusaremos la propiedad CSS para centrar verticalmente nuestro elemento.

Usemos el mismo código HTML que usamos en el ejemplo anterior. Como antes, hay una demostración disponible para que pruebe y experimente con esta técnica.

<div class = "vertical-align">
  Me veo centrado!
</div>

El código CSS no es muy diferente del utilizado en el ejemplo anterior:

.vertical-align {
  fondo: # 13b5ea;
  color: #fff;
  radio de borde: 5px;
  ancho: 200 px;
  alinear texto: centro;
  altura de línea: 4rem;
}

En esta técnica, hemos utilizado la line-heightpropiedad CSS para centrar verticalmente el texto de un botón.

Si bien esta técnica funciona bien con botones o elementos de navegación, debe usarla con mucho cuidado: si por alguna razón su texto va en varias líneas, todo se verá completamente roto. Es por eso que tiendo a usar la técnica de relleno en lugar de esto cuando centro verticalmente el texto en un botón.

Alineación vertical CSS con display: table-cell

Esta técnica requiere 2 contenedores, y se usa display: tableen un elemento padre y display: table-cellen su hijo.

Esto le permite replicar cómo se alinean el texto y el contenido en una celda de tabla HTML. Consideremos el siguiente código HTML:

<div id = "parent">
  <div id = "child"> Estoy centrado </div>
</div>

Aquí está el CSS relacionado:

#parent {
  fondo: # 13b5ea;
  color: #fff;
  altura: 200 px;
  pantalla: mesa;
}

#child {
  display: table-cell;
  alineación vertical: medio;
 }

Aquí no hay nada complicado: al elemento padre se le asigna una tablepantalla y su hijo usa display: table-cell. El contenido del elemento hijo se centra verticalmente utilizando la vertical-align: middlepropiedad

Si también necesita alinear el contenido horizontalmente, simplemente debe usarlo text-align: centeren el elemento primario.

Esta técnica funciona muy bien en todos los navegadores modernos. Tenga en cuenta que display: tabley display: table-cellno son compatibles con IE7 y versiones anteriores.

Preguntas frecuentes

---

¿Puedo centrar verticalmente un elemento usando la alineación vertical?

Un error común es que la vertical-align: middlepropiedad CSS se puede usar para centrar verticalmente un elemento dentro de su elemento primario. Si bien vertical-align: middlese puede usar para alinear verticalmente el contenido de una celda de la tabla, no funcionará en otros elementos.

¿Cómo centrar elementos verticalmente en CSS?

Dependiendo del tipo de elemento que desee alinear verticalmente, puede usar una caja flexible, transformaciones, relleno vertical o altura de línea, como se detalla en el artículo.

Te esperamos en los siguientes artículos en donde hablaremos mas acerca de estos temas, los cuales hoy en día son de vital importancia en el mundo de la tecnología.

¿Te gustaría aprender Diseño Web?
Tenemos los cursos que necesitas.¡Haz clic aquí!