Text vertikal in der Spalte 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.

Endecke weitere Divi Codeschnipsel

Offenes mobiles Menü Icon ändern

Offenes mobiles Menü Icon ändern

Standardmäßig wird das mobile Divi Menü Icon, das sogenannte Burger-Icon, sowohl bei geschlossenem als auch geöffnetem Menü angezeigt. Mit diesem Codeschnipsel kannst du das Icon für das geöffnete Menü ganz einfach ändern. Hier ein Live-Beispiel: [video width="326"...

Logo beim Scrollen ändern

Logo beim Scrollen ändern

Mit diesem Codeschnipsel kannst du dein Logo beim Scrollen ändern. /* Ändert das Logo beim Scrollen */ .et-fixed-header #logo { content: url(hier neue Bild-URL eintragen); } Das kann z.B. sinnvoll sein, wenn dein Hauptmenü transparent und dein Logo weiß ist und sich...

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Du nutzt noch kein Divi Child-Theme?

Dann hol dir mein fertiges Divi Basis-Child Theme als perfekte Basis für deine Divi Website!

Hey, ich bin Tobias!

Portraitfoto von Tobias Both

Ich bin selbstständiger Webdesigner und der Gründer von Divitorials.

Seit rund einem Jahr veröffentliche ich auf diesem Blog Tutorials, Tipps und Tricks rund um das beliebte Divi Theme von Elegant Themes und teile meine Erfahrungen, die ich während meiner Arbeit als selbstständiger Webdesigner mit Divi sammeln konnte.

Mehr über mich erfahren