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.
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.
Verás que se van centrando verticalmente los elementos que añadimos, justo lo que íbamos buscando 🙂
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!