A veces, muchas veces, al añadir elementos en Divi, es complicado hacer que todos se muestren centrados verticalmente, para que ocupen una misma línea imaginaria, algo fundamental a la hora de diseñar una web.

Es verdad que se puede conseguir, forzando la alienación vertical mediante jQuery, pero no siempre funciona en todos los navegadores, y además en ocasiones es incompatible con la optimización para las métricas web principales.

Si te encuentras con esta necesidad, o más bien, cuando te encuentres con esta necesidad, lo mejor es recurrir al CSS, pues unas pocas líneas te van a solucionar el problema de inmediato.

Índice de contenidos

El problema

Para que veas a qué me refiero, haz lo siguiente:

Añade una sección a cualquier página o entrada usando el maquetador Divi.
Elige añadir 3 columnas.
En la primera y tercera columna añade un módulo de imagen
En la segunda columna, la de enmedio, añade un módulo de botón
En la pestaña de diseño de cada elemento (imágenes y botón) abre la sección de alineación y haz clic en el icono de alineación vertical superior (por defecto la alineación es a la izquierda)

Como puedes ver, consigues 3 columnas, cada una con un elemento, los cuales están – convenientemente – alineados verticalmente en la parte superior.

Además, puedes alinear al centro el botón.

Pero no hay ningún ajuste que te facilite centrar verticalmente esos elementos…

La solución

Para empezar vamos a añadir un poco de CSS sencillito donde suelas hacerlo, en la hoja de estilos del tema hijo, en las opciones de Divi o en el personalizador de temas, este:

/* Centrar verticalmente elementos Divi */
.divi-alinear-vertical-ayudawp { 
display: flex; 
flex-direction: column; 
justify-content: center;
}

Y apunta o quédate con el nombre utilizado para la nueva clase CSS: divi-alinear-vertical-ayudawp, que la necesitaremos a continuación.

Ahora ve a los ajustes de la sección y abre la configuración de cada una de las columnas de la misma.

En la sección avanzada de cada columna, añade una clase CSS, la que antes creamos (divi-alinear-vertical-ayudawp) y guarda los cambios en la configuración de cada columna.