Howto: Inhalte und Module in Divi vertikal zentriert ausrichten
.centered {
display: flex;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
}Definitiv das CSS-Code-Snippet, welches ich am häufigsten bei unseren Webdesign-Projekten mit Divi verwende. Es gibt natürlich auch andere Lösungen, bspw. mit den Benutzerdefinierten Außen- und Innenabständen (margin/padding) spielen oder ein Trenner-Modul einfügen, diese liefern jedoch nicht so stabile Ergebnisse. Kommen neue Inhalte dazu oder verändert sich die Bildschirmgröße, müssen die Module für jede Reihe neu angepasst werden.
display: flex;
Wenn Du alles über das Layouten mit flexbox lernen möchtest, hier wird eine gute Einführung gegeben. Wir sind ja aber hier, um folgendes Problem zu lösen:
„Ich habe verschieden große Module in einer Reihe. Ich möchte, dass diese Module nicht an der oberen Kante kleben, sondern sich immer an der mittleren Achse zentrieren.“
Die Lösung
Kopiere unser Divi CSS Snippet in dein Custom CSS und vergebe die Klasse „centered“ an die Reihe, die du gerne vertikal zentriert hättest!
Vielen Dank! Wichtig wäre noch der Hinweis auf justify-content: center; falls der der Text auch horizontal zentriert werden soll.
Hi André! justify-content sollte im hier beschriebenen Fall (Reihe mit mehreren Spalten) nicht benötigt werden, da die Spalten die horizontale Aufteilung vornehmen. In anderen Fällen, bspw. einer Full Screen Hero Sektion mit zentriertem Text, muss man das CSS natürlich ein bisschen anpassen 🙂