Comment centrer ou aligner verticalement des modules dans Divi

par | 26 Nov 2020 | Divi

centrer des éléments dans Divi

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.

aligner DIVI en bas de colonne

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;

Vous êtes e-commerçant ?

Découvrez comment :

✔︎ booster votre réputation
✔︎ surprendre et enchanter vos clients
✔︎ éliminer les erreurs de préparation de commande

Solution e-commerce

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *