Centrer du contenu verticalement sur Divi - Divi Community

Vous vous êtes certainement déjà retrouvé dans le cas de figure illustré ci-dessous ?
Ça peut être une volonté graphique, mais bien souvent ce type de mise en page fonctionne mieux avec un contenu centré.
Voici comment corriger ça.

Centrer verticalement du contenu dans Divi

Ça tient en quelques lignes de CSS !

Encore une fois la propriété CSS flex vient à notre rescousse. Il vous suffit donc d’ajouter les CSS suivantes à votre site Divi.
Dans le code CSS ci-dessous, pour une meilleure lisibilité et donc une plus grande compréhension, j’ai volontairement séparé les règles principales (lignes 2 à 4) de la flopée de déclinaisons avec préfixes qui sont nécessaires afin d’obtenir un résultat homogène sur les divers navigateurs Internet.

Vous voulez savoir où insérer ce code CSS ? Lisez notre article “7 manières d’ajouter des CSS à Divi“.

.centrer-verticalement {
display: flex;
flex-direction: column;
justify-content: center;

/* Et les déclinaisons avec préfixes pour obtenir un résultat homogène sur les divers navigateurs */
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
}

Comment centrer verticalement ses éléments dans Divi ?

Et bien, il ne vous reste qu’à utiliser où bon vous semble (section, ligne…) la classe centrer-verticalement pour… centrer verticalement votre contenu !

Dans mon exemple :

  • ce sera dans les paramètres de ma ligne, dans Avancé -> ID et classes CSS -> Colonne 2 classe CSS.
  • pensez également à cocher dans l’onglet Style : Harmoniser la hauteur des colonnes.

Le résultat

Ça a quand même plus de… classe ! (blague de développeur…)

Centrer verticalement du contenu dans Divi

Personnellement, c’est une astuce CSS que j’utilise systématiquement sur tous mes sites Divi.
Elle est passe-partout car elle permet aussi bien de centrer verticalement des modules dans une ligne (comme dans cet exemple) mais aussi des lignes dans des sections.

Ces quelques lignes de CSS font parties du fichier style.css du thème enfant de base dont je me sers pour chacun de mes projets Divi.

Vous n’avez pas de thème enfant ? Téléchargez gratuitement le thème enfant de Divi Community.