Alinear elementos verticalmente en Divi

Introducción

Cuando estamos construyendo nuestro sitio en Divi seguramente nos hemos encontrado con la siguiente situación

Una sección con dos columnas, donde una de ellas tiene un elemento considerablemente mas alto que el otro. A continuación, vamos a ver cómo, por medio de unos ajustes muy simples, podemos alinear verticalmente elementos acorde a la altura mas pronunciada de la columna adyacente.

Pasos para alinear verticalmente el contenido

Primero que nada, vamos a hacer que nuestra fila tenga habilitada la opción de igualar las alturas de las columnas; dicha opción la encontramos al editar la fila dirigiéndonos a Diseño-> Tamaño

Seguido de ello, vamos a dirigirnos a la columna donde se encuentra el contenido que deseamos alinear y vamos a agregar una simple linea de estilos CSS. Nos dirigimos a las opciones de edición de la fina Avanzado-> CSS personalizado-> Elemento principal

La linea que vamos a agregar de CSS es la siguiente:

align-self: center;

Lo que nos dará como resultado lo siguiente

Muy simple, ¿verdad? pero aun hay mas, la linea que acabamos de agregar podemos cambiar su posición haciendo que el contenido este alineado en el extremo mas superior (El cual seria la posición por defecto del elemento) y el extremo mas inferior, veamos ambos casos

Alineación al inicio

Con la siguiente linea, va al inicio de la columna en relación de la altura de la columna adyacente

align-self: flex-start;

Alineación al final

En este caso, la linea va al final de la columna en relación de la altura de la columna adyacente

align-self: flex-end;

Conclusiones

Como podemos apreciar, en la situación anterior, la posible solución mas directa hubiese sido el aplicar paddings al contenido hasta que tomase la alineación a nuestro gusto; ahora, con los estilos sugeridos podemos hacerlo mucho mas preciso y con considerablemente menos esfuerzo.

Si te ha gustado esta publicación y te interesa seguir aprendiendo mas tips y mejorar en la construcción de tus sitios utilizando Divi puedes echarle un vistazo a los cursos gratuitos que tenemos al respecto

 

Updated on 17 agosto, 2022

Related Articles