Dans certains cas, il est nécessaire de centrer verticalement du contenu dans un module Divi. Les options natives ne permettent pas toujours d’obtenir ce résultat, mais il est possible d’y parvenir avec du CSS.
Contenu avancé #
Cet article utilise du code CSS. Une mauvaise manipulation peut impacter l’affichage de votre site.
Objectif #
Centrer verticalement le contenu d’un module Divi.
Solution avec Flexbox #
Dans le module Divi, ouvre l’onglet Avancé, puis ajoute le code suivant :
selector {
display: flex;
flex-direction: column;
justify-content: center;
}
Comprendre le fonctionnement #
- display: flex; active le mode Flexbox
- flex-direction: column; organise le contenu verticalement
- justify-content: center; centre le contenu verticalement
Cas d’utilisation #
- Centrer du texte dans une colonne
- Aligner un bouton verticalement
- Créer des blocs visuellement équilibrés
Points d’attention #
- Le mot-clé
selectorfonctionne uniquement dans Divi - Ce code modifie le comportement du module
- Peut impacter l’alignement des éléments internes
Astuce utile #
- Le centrage vertical nécessite une hauteur disponible
- Active Harmoniser les hauteurs des colonnes dans les paramètres de la ligne
Pourquoi cela ne fonctionne parfois pas #
Si le contenu ne se centre pas correctement, c’est généralement parce que la colonne n’a pas de hauteur définie. Sans hauteur, le centrage vertical n’a aucun effet visible.
Compatibilité #
Avec les versions récentes de Divi, certaines options de centrage sont disponibles directement dans l’interface. Cette méthode reste utile dans des cas spécifiques ou plus avancés.
Pour conclure #
Flexbox est une solution simple et efficace pour centrer verticalement du contenu dans Divi lorsque les options natives ne suffisent pas.