Hosting WordPress Webempresa

Alinear elementos verticalmente en Divi

por | Ago 17, 2022 | Tutoriales Divi

Alinear elementos verticalmente en Divi

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 más 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 más 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 línea de estilos CSS. Nos dirigimos a las opciones de edición de la fina Avanzado-> CSS personalizado-> Elemento principal

La línea que vamos a agregar de CSS es la siguiente:

align-self: center;

Lo que nos dará como resultado lo siguiente

Muy simple, ¿verdad?, pero aún hay más, la línea que acabamos de agregar podemos cambiar su posición haciendo que el contenido esté alineado en el extremo más superior (El cual sería la posición por defecto del elemento) y el extremo más inferior, veamos ambos casos

Alineación al inicio

Con la siguiente línea, 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 línea 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 más 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 más preciso y con considerablemente menos esfuerzo.

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

 

¿Te ha resultado útil este artículo?

Hosting WPFácil