Ce n’est pas faute d’avoir réclamé ces options auprès du SAV de Divi, mais voilà, pour aligner et centrer verticalement des modules ou des colonnes dans Divi, il n’y a à ce jour pas de meilleure solution que d’utiliser quelques lignes de code. Rien de bien compliqué cependant. J’ai rassemblé ici des ressources pour vous permettre de mater ces modules et en faire ce que vous voulez.

Comment centrer des colonnes verticalement

Commencez par ajouter à la feuille de style globale les quelques lignes suivantes :

.et_pb_equal_columns >.et_pb_column {
margin-top:auto;
margin-bottom:auto;
}

puis activez l’option d’égalisation des hauteurs de colonne dans le menu « Dimensionnement ».

Rien de plus.

Comment centrer verticalement du texte dans un module de texte

Visuellement, vous obtenez le résultat ci-dessous. L’espace au dessus du texte sera toujours égal à l’espace en dessous du texte.

Commencez par égaliser les hauteurs de colonnes.

Ajoutez la classe texte-centre au module de texte dans l’onglet « Avancé »

Ajoutez ce code à la feuille de style globale de Divi

.texte-centre {
display: table;
height: 100%;
}
.texte-centre .et_pb_text_inner {
display: table-cell;
vertical-align: middle;
}

Aligner un module en bas d’une colonne

Cette méthode est très pratique quand vous souhaitez aligner un bouton en bas d’une colonne quelque soit la longueur de la colonne où son contenu, cela permet d’obtenir un rendu visuel propre et bien aligné comme sur l’exemple ci-dessous.

Allez d’abord dans les paramètres de la colonne, onglet Avancé et CSS personnalisé et ajoutez ce code :

display: flex;
flex-flow: column;

Puis dans le module que vous voulez caler en bas de la colonne, allez dans l’onglet Avancé et ajoutez ce code :

margin-top: auto;