Howto: Inhalte und Module in Divi vertikal zentriert ausrichten

Divi Inhalte vertikal zentrieren 
.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!