Divi Text vertikal zentrieren

Mit diesem Codeschnipsel kannst du Texte (oder auch andere Elemente) vertikal in der Spalte zentrieren.

Das macht z.B. Sinn, wenn du links ein Bild hast und rechts davon einen Text vertikal zentriert anzeigen möchtest.

Der Vorteil bei diesem Codeschnipsel gegenüber einer Zentrierung per oberen Abstand (Padding-Top) ist, dass das Element auch dann exakt zentriert ist, wenn sich die Bildschirmbreite verändert (z.B. Desktop vs. Laptop).

Schritt 1:

Um deine Elemente zu zentrieren öffnest du zunächst die Einstellungen der betreffenden Zeile (türkis) und öffnest unter dem Tab „Inhalt“ über das Zahnrad die Einstellungen der Spalte, in der dein Text zentriert werden soll.

Kopiere nun den nachfolgenden Code unter Erweitert > Benutzerdefinierte CSS > Hauptelement.

display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;

Klicke nun auf „Änderungen speichern“. Du wirst nun zuerst noch keine Änderung sehen. Dazu müssen wir im nächsten Schritt noch die Spaltenhöhen anpassen.

Schritt 2:

Wechsle zu den Zeileneinstellungen und stelle unter Design > Größe einstellen den Schalter bei Spaltenhöhe ausgleichen auf „Ja“. Nun sollte der Text in der Spalte zentriert sein.