Divi: Inhalte und Module vertikal zentrieren

Das Problem: Module kleben oben

Sie haben eine Reihe in Divi mit zwei oder mehr Spalten. Links ein kurzes Text-Modul, rechts ein Bild oder eine längere Beschreibung. Standardmäßig richtet Divi alle Module an der Oberkante der Reihe aus. Das Ergebnis: ungleiche Abstände, ein visuelles Ungleichgewicht, und sobald Sie Inhalte änderst oder die Bildschirmgröße wechselt, müssen Sie Padding und Abstände wieder von Hand anpassen.

Es gibt alternative Workarounds: per margin/padding nachjustieren oder ein Divi-Trenner-Modul als Abstandshalter einfügen. Beide Ansätze liefern aber kein stabiles Ergebnis – sie brauchen manuelle Nacharbeit bei jeder Inhaltsänderung. Die saubere Lösung ist eine einzige CSS-Klasse.

Die Lösung: display flex

Flexbox ist das native CSS-Layoutmodell für genau diesen Fall. Mit display:flex werden alle direkten Kind-Elemente einer Reihe zu Flex-Items. Die Eigenschaft align-items:center richtet diese Items entlang der Querachse (vertikal) mittig aus. Das Ergebnis ist eine perfekte Zentrierung auf der Mittellinie – unabhängig davon, wie hoch die einzelnen Module sind.

Das CSS-Snippet, das Sie brauchen:

.centered {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
}

Mit flex-direction:row bleibt die horizontale Anordnung erhalten. flex-wrap:wrap sorgt dafür, dass Module auf kleinen Screens umbrechen, anstatt aus dem Viewport herauszuragen.

Schritt für Schritt: Snippet einbauen und Klasse setzen

1. Custom CSS öffnen – Gehe im WordPress-Backend zu Divi → Theme-Optionen → Allgemein → Eigenes CSS (oder nutzen Sie den Divi Custom CSS-Bereich im Theme-Customizer). Sie können das Snippet auch in der style.css Ihres Child-Themes ablegen.
2. Snippet einfügen – Kopiere den folgenden CSS-Block 1:1 in das Custom-CSS-Feld:

   .centered {
     display: flex;
     align-items: center;
     flex-direction: row;
     flex-wrap: wrap;
   }

   Speichere die Änderungen.
3. Reihe im Divi Builder auswählen – Öffne die Seite im Divi Visual Builder. Klicken Sie auf das Reihen-Symbol (blauer Kreis mit Reihen-Icon), um die Reihen-Einstellungen zu öffnen.
4. CSS-Klasse setzen – Wechsle in der Reihen-Einstellung auf den Tab Erweitert. Im Feld CSS-Klasse trägen Sie ein: centered. Mehrere Klassen trennen Sie mit einem Leerzeichen.
5. Speichern und prüfen – Speichere die Seite und testen Sie im Browser sowie in der mobilen Vorschau. Die Module der Reihe sollten jetzt auf der Mittellinie ausgerichtet sein.

Varianten und Erweiterungen

Nur auf Desktop, nicht auf Mobile

Auf schmalen Screens sollen Module oft untereinander stehen, nicht nebeneinander. Mit einer Media-Query bleibt die Flexbox-Zentrierung nur für breite Viewports aktiv:

@media (min-width: 768px) {
  .centered {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

Inhalte an der Oberkante ausrichten

Wenn Sie statt der Mittellinie die Oberkante bevorzugst, tauschen Sie align-items:center gegen align-items:flex-start aus. Für die Unterkante: align-items:flex-end.

.top-aligned {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
}

Inhalte auch horizontal zentrieren

Wenn Sie die Inhalte zusätzlich horizontal (links-rechts) zentrieren möchten, ergänzen Sie justify-content:center:

.centered-both {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
}

Ratgeber: Flexbox in Divi richtig einsetzen

Warum Divi keine native Vertikal-Zentrierung hat

Divi nutzt intern ein eigenes Grid-System, das auf älteren CSS-Ansätzen aufbaut. Vertikal-Ausrichtung für unterschiedlich hohe Spalten ist dort nicht im Standard-Baukasten vorgesehen. Mit einer simplen Flexbox-Klasse übersteuern Sie das ohne Risiko: Die Klasse greift nur an der Reihe, an der Sie sie setzen, und beeinflusst keine anderen Seitenelemente.

Wann Padding und Margin besser sind

Nicht jede Situation braucht Flexbox. Wenn Sie nur zwei Module haben, die beide ähnlich hoch sind und sich selten ändern, reicht manuelles Padding oben und unten. Flexbox lohnt sich vor allem, wenn Sie:

• Module mit sehr unterschiedlichen Höhen kombinierst (Text neben Bild, Icon-Box neben langer Beschreibung)
• Inhalte regelmäßig änderst oder ergänzt
• die Reihe auf verschiedenen Viewports gleich aussehen lassen willst

Divi Child-Theme vs. Theme-Optionen

Die sicherste Stelle für Custom CSS in Divi ist ein Child-Theme. CSS in den Theme-Optionen überlebt keine Theme-Neuinstallation ohne Export. Das Child-Theme behält das Snippet bei jedem Update. Wenn Sie kein Child-Theme nutzen, ist der Theme-Customizer unter Zusätzliches CSS die zweite Wahl – der Inhalt bleibt beim Theme-Update erhalten, solange Sie das Theme nicht komplett neu installierst.

Flexbox und das Divi-eigene Column-System

Divi setzt auf .et_pb_column als direkte Kind-Elemente einer Reihe. Wenn Sie display:flex auf die Reihe legst, werden diese Columns zu Flex-Items. Das verändert ihr Verhalten leicht: Der Standard-Abstand zwischen Spalten (den Divi per padding steuert) bleibt erhalten. Nur die vertikale Ausrichtung verändert sich. In der Praxis gibt es keine bekannten Kollisionen mit dem Standard-Divi-Verhalten, solange Sie keine verschachtelten Flex-Container erstellen.

Debugging: Warum wirkt die Klasse nicht?

Häufige Fehlerquellen, wenn das Snippet scheinbar nichts tut:

• Klasse an falscher Stelle: Die Klasse muss an der Reihe sitzen, nicht an der Spalte oder am Modul.
• CSS-Cache: Divi und Caching-Plugins können das neue CSS verzögern. Browser-Cache leeren und ggf. Divi Static CSS neu generieren (Divi → Theme-Optionen → Allgemein → Statische CSS-Datei generieren).
• Spezifität: Wenn ein anderes Divi-Stylesheet die Ausrichtung übersteuert, erhöhe die Spezifität: .et_pb_row.centered statt nur .centered.
• Tippfehler: Klasse im CSS und im Builder-Feld müssen exakt identisch sein (Groß-/Kleinschreibung beachten).

Interne Links zu weiterführenden Themen

Wenn Sie öfter mit Custom CSS in Divi arbeiten, lohnt ein Blick auf unseren Artikel über Divi Custom CSS: dort finden Sie weitere nützliche Snippets für Abstände, Typografie und Hover-Effekte. Wer das Theme insgesamt besser verstehen möchte, findet in unserem Divi-Theme-Artikel eine fundierte Einführung. Für professionelle Umsetzung steht unser Team als WordPress-Agentur bereit – oder Sie melden sich direkt über Kontakt.

Häufige Fragen zu Divi vertikal zentrieren

Joshua Stark

Geschäftsführer STARK Marketing

Joshua hat STARK 2016 gegründet und leitet die Webdesign- und SEO-Praxis. Dieses Snippet gehört zu den meistgenutzten CSS-Helpers in seinen Divi-Projekten.

Verwandte Artikel