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.
Hallo Tobias,
mal schauen, ob das hier noch gelesen wird 🙂
Geht der Code nicht bei Icon + Text also diesem Informationstextmodul von Divi?
Scheitere gerade daran…
Hi Lisa,
danke für deinen Kommentar. Klar wird das hier gelesen 🙂
Doch das klappt auch mit dem Informationstextmodul von Divi. Was genau möchtest du denn zentrieren? Das Informationstextmodul in einer Spalte?
Dann musst du darauf achten, dass du den Code in die Spalte, und nicht in das Informationstextmodul kopierst. Daran könnte es liegen…
Du kannst mir aber auch gerne ein bisschen mehr Kontext geben, dann kann ich dir mehr sagen, warum es nicht klappt.
Viele Grüße,
Tobias
Moin Tobias, grundsätzlich vielen Dank für Deine Hilfe. Allerdings ist es verwirrend. Ich möchte eine ZEILE von Divi vertikal zentrieren. Das ist das grün umrandete Teil. In Deinem Beispiel zentrierst Du Text INNERHALB einer Zeile in einem Modul in Relation zu dem Bild links… Wie zentriere ich denn eine GESAMTE Zeile z. B. vertikal mitten auf meinem Bildschirm, wenn ich den Hintergrund der Sektion auf 100vh großgezogen habe? Danke für eine Antwort.
Gruß vom Felix
Hallo Felix,
vielen Dank für deinen Kommentar!
Versuche mal den Code in der Sektion (Blau) unter Erweitert > Benutzerdefinierte CSS > Hauptelement reinzukopieren. Damit sollte es funktionieren.
Viele Grüße,
Tobias
Hallo Tobias, vielen Dank für die prompte Antwort. Das passt. Ich habe gestern versucht, das zu übertragen auf die von Dir genannte Thematik (Sektion etc.) aber irgendwas habe ich da falsch gemacht. Vielen Dank!
Gruß vom Felix
Hi Felix,
kein Thema! Super, dass es geklappt hat! Manchmal reicht es schon, wenn der Code im falschen Feld landet 😉
Weiterhin viel Erfolg!
Viele Grüße,
Tobias