.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.
Wow!
Jedes Mal wenn ich diese Seite neu lade, sehe ich einen anderen Strand!
Wow!
Jedes Mal wenn ich diese Seite neu lade, sehe ich einen anderen Strand!