Divi CSS - Module einfach und schnell ausrichten

Willst Du Divi-Module in einer Zeile nebeneinander ausrichten, kommst Du mit den Divi-Board-Mitteln leicht an Deine Grenzen. Mit dem Zwischenabstand im Divi-Modul (Padding) kannst Du hier zwar Anpassungen vornehmen, aber sobald sich die Bildschirmgröße (Viewport) verändert, variiert auch Dein eingestellter Zwischenabstand.

Mit CSS (Cascading Style Sheets) kannst Du in Divi wesentlich schneller und professioneller arbeiten.

Als Grundvoraussetzung dient hier der CSS-Befehl „display:flex;“. Diesen hinterlegst Du in der Divi-Zeile, in dem Du die Spaltenhöhen ausgleichst. Diese Grundlage ermöglicht Dir nun weitere CSS-Befehle in das benutzerdefinierte CSS der Spalten einzufügen.

CSS-Befehle

margin: auto;
richtet die kleinere Spalte gegenüber der größeren Spalte zentriert aus.

margin: auto auto 0;
richtet die kleinere Spalte gegenüber der größeren Spalte unten aus.

align-items: center;
richtet die kleinere Spalte gegenüber der größeren Spalte ebenfalls zentriert aus, jedoch fügst Du diesen CSS-Befehl in das benutzerdefinierte CSS der Zeile ein

display:flex;
flex-direction: column;
justify-content: center;

Hier fügst Du das display:flex der Spalte hinzu, die Du ausrichten möchtest. Im Unterschied zu margin:auto; wird mit dieser Befehlsreihenfolge nicht die Höhe der Spalte beeinflusst. Die Spaltenhöhe richtet sich an der gegenüberliegenden größeren Spalte aus.

Variation:

display:flex;
flex-direction: column;
justify-content: flex-end;
richtet das in der Spalte liegende Modul unten aus

display:flex;
flex-direction: column;
justify-content: flex-start;
richtet das in der Spalte liegende Modul oben aus

00:00 Intro
00:38 Spalten sichtbar machen
01:11 display flex in Zeile
01:33 Modul zentriert ausrichten
03:51 Modul zentriert ausrichten, aber Spaltenhöhe beibehalten

----------------------------------------------------------------------------------------------------------------------
Gewinne Menschen mit begeisternden Medien und sei zukunftssicher erfolgreich