Vamos a ver cómo podemos alinear verticalmente cualquier contenido de una manera sencilla
En este tutorial veremos algo muy sencillo como es alinear el contenido verticalmente en cualquier módulo de DIVI, pero que si no sabes por dónde empezar puede ser un verdadero quebradero de cabeza.
Buscamos alinear cualquier contenido que podamos tener en nuestra página (imagen, texto, anuncio, etc) al centro en vez de en la parte de arriba, tal como hace Divi por defecto. Para ver el resultado final de este tutorial, haz scroll hasta el final de esta entrada. También puedes pulsar aquí para ir directamente al resultado final.
Para hacer este tutorial hemos tomado por referencia el de divisoup, pulsa aquí para ver la versión original, en inglés.
La solución a este problema es añadir unas líneas de CSS ya que utilizar el relleno puede ser peor, ya que al cambiar la resolución de pantalla (o bien al realizar un cambio de dispositivo) los cambios que hagamos se desplacen o según el navegador que utilices gestiona diferente los porcentajes en el relleno, dando un resultado final lejos de ser el esperado.
Vamos manos a la obra
Una vez hemos creado una página o entrada y activado “Usar constructor Divi“, pulsa insertar columnas y seleccionamos más de dos columnas.
A continuación insertamos un módulo en cada una de nuestras columnas. Aquí hemos insertado en la primera columna un módulo de texto. En la segunda columna, un módulo de imagen. Vamos a fila y seleccionamos “Diseño“.
Dentro de “Diseño” seleccionamos la pestaña “Tamaño” y dentro de esta activamos la opción “Igualar las alturas de las columnas“.
Ahora abrimos los ajustes de fila y vamos a las columnas, en este caso como queremos alinear la primera con la segunda, seleccionamos al primera.
A continuación dentro de la columna que queremos alinear seleccionamos “Avanzado” y buscamos en la primera pestaña el input que pone “Clase CSS“, ahí añadimos la clase CSS que más adelante crearemos para alinear verticalmente el contenido, en este caso nuestra clase es “alineacion-vertical”.
Vamos a personalizador de temas y buscamos la opción que pone “CSS adicional”
A continuación añadimos este trozo de código:
.alineacion-vertical{
display: flex!important;
flex-direction: column!important;
justify-content: center!important;
}
Y le damos a publicar.
Y ¡Voila! el CSS hizo su magia alineando verticalmente nuestro contenido, una vez creada la clase CSS simplemente tenemos que añadir esa clase a cualquier elemento que queramos alinear en DIVI.
Aquí tenemos el resultado final:
Esperamos que este pequeño tutorial os haya sido de utilidad ¡No dudéis en dejar vuestro comentario si tenéis cualquier duda!
Gracias crack, me sirvió. Después de un buen rato buscando solución 🙂
Gracias Alex por tu apoyo, el post recibe muchas visitas pero tu eres el primero que deja un comentario.
Excelente, pero como haría por ejemplo para que dentro de todo lo que alinié centrado verticalmente, tengo un boton debajo de eso pero quiero que quede alineado al bottom de dicha columna
Primeramente comprueba en el constructor de elementos ese elemento, lo más seguro es que la caja principal tenga un margin-bottom. Déjalo a 0 con CSS y tendrás el botón pegado al elemento que has centrado verticalmente. Quedo a la espera de ver si te ha servido
Me alegro que te haya servido de ayuda este tutorial. Un saludo!