Flexbox - Inspect-Mode was ist das bei Wordpress Theme?

Hallo zusammen,

ich stehe gerade auf dem Schlauch. Ich habe ein Wordpress Theme installiert und möchte das Layout mittels CSS anpassen. Nun wird mir da flexbox angezeigt, welches in zwei Bereiche aufgeteilt ist, wie auf diesem Bild:

und ich möchte die Headline im Container mittig platzieren. Ich bekomme das aber nicht ausgerichtet und weiß nicht, wie dieser Bereich auf der rechten Seite definiert ist (lt. Flexbox)

Bin gespannt und danke schonmal im Voraus!

Gruß

Answer 1

[regex9]

Für eine Zentrierung des Überschriftenelements innerhalb der schwarzen Box kannst du die Box selbst zur Flexbox machen.

.black-box {
  align-items: center;
  display: flex;
  justify-content:center;
}

Für eine Zentrierung im gesamten Container, über beide Spalten hinweg, könnte man für die horizontale Ebene eine absolute Positionierung nutzen.

.container {
  position: relative;
}

.title {
  align-self: center;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}

Damit die vertikale Ausrichtung greift, muss sich das Element für die Überschrift in jedem Fall innerhalb einer Flexbox befinden.

(...) und weiß nicht, wie dieser Bereich auf der rechten Seite definiert ist (lt. Flexbox)

Das solltest du im HTML-Code sehen. Wenn es nur ein Kindelement gibt (die schwarze Box), ist der übrige Rest ungenutzter / leerer Raum. Der Container selbst wird eine explizite Breite haben, auf die er sich streckt.