Wie kann man Text in einem Flexbox vertikal zentrieren?

Question

Ich möchte Flexbox verwenden, um einige Inhalte innerhalb eines

• vertikal auszurichten, habe aber keinen großen Erfolg.

  Ich habe online nachgeschaut und viele der Tutorials verwenden tatsächlich einen Wrapper-Div, der die align-items:center aus den Flex-Einstellungen des Elternelements erhält, aber ich frage mich, ob es möglich ist, dieses zusätzliche Element wegzulassen?

  Ich habe mich in diesem Fall für Flexbox entschieden, da die Höhe des Listenelements dynamisch in % sein wird.

  * {
    padding: 0;
    margin: 0;
  }
  
  html,
  body {
    height: 100%;
  }
  
  ul {
    height: 100%;
  }
  
  li {
    display: flex;
    justify-content: center;
    align-self: center;
    background: silver;
    width: 100%;
    height: 20%;
  }
  
    Dies ist der Text

Answer 1

Anstelle von align-self: center verwenden Sie align-items: center.

Es ist nicht notwendig, flex-direction zu ändern oder text-align zu verwenden.

Hier ist Ihr Code, mit einer Anpassung, um alles funktionieren zu lassen:

ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  /* align-self: center;    <---- ENTFERNEN */
  align-items: center;   /* <---- NEU    */
  background: silver;
  width: 100%;
  height: 20%;
}

Die Eigenschaft align-self gilt für Flex-Elemente. Aber Ihr li ist kein Flex-Element, da sein Elternelement – das ul – nicht display: flex oder display: inline-flex hat.

Demzufolge ist das ul kein Flex-Container, das li kein Flex-Element, und align-self hat keine Auswirkung.

Die Eigenschaft align-items ist ähnlich wie align-self, aber sie gilt für Flex-Container.

Da das li ein Flex-Container ist, kann align-items verwendet werden, um die Kind-Elemente vertikal zu zentrieren.

* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
}
ul {
  height: 100%;
}
li {
  display: flex;
  justify-content: center;
  /* align-self: center; */
  align-items: center;
  background: silver;
  width: 100%;
  height: 20%;
}

  Dies ist der Text

CodePen-Demo

---

Technisch gesehen, so funktionieren align-items und align-self...

Die Eigenschaft align-items (am Container) setzt den Standardwert von align-self (an den Elementen). Daher bedeutet align-items: center, dass alle Flex-Elemente auf align-self: center gesetzt sind.

Aber Sie können dies standardmäßig überschreiben, indem Sie das align-self bei einzelnen Elementen anpassen.

Zum Beispiel möchten Sie möglicherweise Spalten mit gleicher Höhe, daher ist der Container auf align-items: stretch gesetzt. Allerdings muss ein Element oben fixiert sein, daher ist es auf align-self: flex-start gesetzt.

Beispiel

---

Wie ist der Text ein Flex-Element?

Einige Leute fragen sich vielleicht, wie eine Textreihe...

Dies ist der Text

ein Kind-Element des li ist.

Der Grund dafür ist, dass Text, der nicht explizit von einem Inline-Level-Element umschlossen ist, algorithmisch von einer Inline-Box umschlossen wird. Dadurch wird er zu einem anonymen Inline-Element und Kind des Elternelements.

Aus der CSS-Spezifikation:

9.2.2.1 Anonyme Inline-Boxen

Jeder Text, der direkt innerhalb eines Blockcontainer-Elements enthalten ist, muss als anonymes Inline-Element behandelt werden.

Die Flexbox-Spezifikation sieht ein ähnliches Verhalten vor.

4. Flex-Elemente

Jedes im Fluss befindliche Kind eines Flex-Containers wird zu einem Flex-Element, und jeder zusammenhängende Textblock, der direkt innerhalb eines Flex-Containers enthalten ist, wird in ein anonymes Flex-Element eingewickelt.

Daher ist der Text im li ein Flex-Element.

Answer 2

Der beste Schritt ist einfach, ein Flexbox in einer Flexbox zu verschachteln. Alles was du tun musst, ist dem Kind align-items: center zu geben. Dies wird den Text vertikal zentrieren innerhalb seines Elternteils.

// Angenommen, eine horizontal zentrierte Reihe von Elementen für das Elternelement, aber es muss nicht sein
.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

.child {
  display: flex;
  align-items: center;
}

Answer 3

Die am meisten gewählte Antwort dient zur Lösung dieses spezifischen Problems, das vom OP veröffentlicht wurde, bei dem der Inhalt (Text) innerhalb eines inline-block-Elements eingewickelt wurde. In einigen Fällen kann es darum gehen, ein normales Element vertikal in einem Container zu zentrieren, was auch auf meinen Fall zutrifft. Hierfür benötigt man nur:

align-self: center;

Answer 4

Ich werde die Antwort nicht schreiben, da bereits viele Leute die richtige gegeben haben. Allerdings möchte ich dir ein nützliches Werkzeug zeigen, das dich in Zukunft vor solchen Problemen bewahren kann.

In den Dev Tools deines Browsers musst du ein Element mit display: flex inspizieren und auf das in dem Screenshot gezeigte Symbol klicken.

Dann erhältst du die Möglichkeit, einige Eigenschaften für display: flex auszuwählen, sodass du schnell alle Optionen überprüfen kannst, ohne zu wissen, was du verwenden kannst.

Answer 5

ERGEBNIS

HTML

  Dies ist der Text
  Dies ist ein weiterer Text
  Dies ist ein weiterer Text

---

Verwende align-items anstelle von align-self und habe auch flex-direction auf column hinzugefügt.

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.list {
  display: flex;
  justify-content: center;
  flex-direction: column;  /* <--- Ich habe dies hinzugefügt */
  align-items: center;   /* <--- Änderung hier */
  height: 100px;
  width: 100%;
  background: silver;
}

.list li {  
  background: gold;
  height: 20%; 
}