Divi vertikal Zentrieren von Text und Bildern
Posted on: Apr 23

Divi vertikal Zentrieren von Text und Bildern

Divi vertikal Zentrieren von Text und Bildern

Vertikale Ausrichtung von Text und Bildern in Divi mit benutzerdefiniertem CSS

Verbessern Sie die visuelle Attraktivität Ihrer Inhalte durch die vertikale Ausrichtung von Text und Bildern in Divi. Leider bietet Theme keine einfache Möglichkeit, dies zu realisieren – benutzerdefiniertes CSS ist erforderlich.

In dieser Divi-Anleitung zeigen wir Dir, wie Du Deinen Divi-Inhalt ganz einfach vertikal zentriert ausrichten kannst.

Lösung 1: Vertikales Zentrieren von Inhalten in einer Zeile mit Flex und Auto-Margin

  1. Wählen Sie auf der Registerkarte Design Ihrer Zeileneinstellungen die Registerkarte Größenanpassung und aktivieren Sie Spaltenhöhen ausgleichen.
  2. Um eine bestimmte Spalte vertikal auszurichten, fügen Sie margin:auto; auf der Registerkarte „Erweitert“ hinzu.
Divi Zeile Einstellungen - Spaltenhöhe ausgleichen
Divi Spalteninhalt vertikal zentrieren mit Margin Auto
Divi Text mittig zu Bild horizontal ausgerichtet

Methode 2: Vertikale Ausrichtung von Inhalten in einer Zeile mit CSS Flex direction

  1. Navigieren Sie zur Registerkarte Design in Ihren Zeileneinstellungen, wählen Sie die Registerkarte Größenanpassung und aktivieren Sie Spaltenhöhen ausgleichen.
  2. Fügen Sie für die Spalte, die Sie vertikal ausrichten möchten, auf der Registerkarte „Erweitert“ folgendes hinzu:
display: flex; 
flex-direction: column; 
justify-content: center;
Text in Divi mit Flexbox mittig zentrieren

Ansatz 3: Vertikale Zentrierung des Inhalts innerhalb einer Spalte mithilfe von CSS-Flexbox-Techniken

  1. Wählen Sie auf der Registerkarte Design Ihrer Zeileneinstellungen die Registerkarte Größenanpassung und aktivieren Sie Spaltenhöhen ausgleichen.
  2. Um die gewünschte Zeilenspalte vertikal justieren, fügen Sie auf der Registerkarte „Erweitert“ die Option align-self: center; hinzu.
Vertikale Zentrierung mit Align Self in Divi

Empfehlung: Weitere Divi Tricks lernen.

Methode 4: Vertikales Zentrieren von Inhalten in einer Zeile mit CSS Grid

  1. Um diese Methode anzuwenden, navigieren Sie zur Registerkarte Design in den Zeileneinstellungen, wählen Sie die Registerkarte Größenanpassung und aktivieren Sie Spaltenhöhen ausgleichen.
  2. Fügen Sie für die Spalte, die Sie vertikal ausrichten möchten, in der Registerkarte „Erweitert“ display: grid; align-items: center; hinzu.
display: grid; 
align-items: center;

Divi Module in einer Zeile mit CSS Grid mittig ausrichten

Methode 5: Vertikales Zentrieren von Inhalten in einer Zeile mit CSS-Positionierung

  1. Wählen Sie auf der Registerkarte Design Ihrer Zeileneinstellungen die Registerkarte Größenanpassung und aktivieren Sie Spaltenhöhen ausgleichen.
  2. Für die Spalte, die Sie vertikal ausrichten möchten, fügen Sie auf der Registerkarte „Erweitert“ position: relative; hinzu.
  3. Erstellen Sie nun ein benutzerdefiniertes CSS[1] für das Element innerhalb der Spalte, das Sie zentrieren möchten. Fügen Sie dies zum benutzerdefinierten CSS hinzu:
position: absolute; 
top: 50%; 
transform: translateY(-50%);

Divi Textinhalt mit Position Absolute Vertikal mittig zentrieren

Fazit

In diesem Blogartikel haben wir fünf verschiedene Methoden vorgestellt, um Inhalte wie Text und Bilder vertikal zu zentrieren und auf diese Weise das Erscheinungsbild Ihrer Divi Website zu verbessern.

Jede dieser Methoden hat ihre eigenen Vor- und Nachteile. Daher sollten Sie diejenige wählen, die am besten zu Ihrem Projekt und mit deren Umgang Sie sich am sichersten fühlen.

Mit etwas Übung und den richtigen Techniken können Sie den visuellen Reiz Ihrer Divi-Website maximieren und ein ansprechendes, professionelles Design erreichen.

Experimentieren Sie mit diesen Methoden, um herauszufinden, welche für Sie am besten funktioniert, und genießen Sie die optimierte Darstellung Ihrer Module und deren Inhalte.

Daniel Trabold Gründer von Trabolda25 und WordPress Experte

Artikel von

Daniel Trabold

Daniel hat mehr als 10 Jahre Erfahrung in der Programmierung und ist absoluter WordPress Fan. Wenn er nicht in seinem dunklen Keller programmiert, dann ist er gern am Strand oder im Gym.

Kontakt aufnehmen