wake-up-neo.com

Wie wird Text in einer Flexbox vertikal ausgerichtet?

Ich möchte mit flex box einige Inhalte in einem <li> vertikal ausrichten, aber keinen großen Erfolg haben.

Ich habe online nachgesehen und viele der Tutorials verwenden tatsächlich einen Wrapper div, der den align-items:center von den Flex-Einstellungen des übergeordneten Elements erhält. 

Ich habe mich in diesem Fall für die Verwendung von Flex Box entschieden, da die Höhe des Listenelements ein dynamisches% ist. 

* {
  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%;
}
<ul>
  <li>This is the text</li>
</ul>

htmlcsscss3flexbox
256
styler

Edit: Bitte verwenden Sie Michael_Bs Antwort anstelle von meiner. Ich würde diese Antwort löschen, wenn ich könnte, aber akzeptierte Antworten können nicht gelöscht werden.

Wenn Sie den flex-direction vertikal machen (mit column), zentriert justify-content: center vertikal. Dann können Sie einfach mit text-align: center auch horizontal zentrieren.

li {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

Hier ist es in Aktion: http://codepen.io/anon/pen/Fkhgo

339
Ben Visness

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

Es ist nicht erforderlich, flex-direction zu ändern oder text-align zu verwenden (wie in eine andere Antwort vorgeschlagen).

Hier ist Ihr Code mit einer Anpassung, damit alles funktioniert:

ul {
  height: 100%;
}

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

Die Eigenschaft align-self gilt für flex items. Ihr li ist jedoch kein flexibler Gegenstand, da für das übergeordnete Element - ul - kein display: flex oder display: inline-flex angewendet wird.

Daher ist ul kein Flex-Container, li ist kein Flex-Element und align-self hat keine Auswirkungen.

Die align-items - Eigenschaft ist align-self ähnlich, außer dass sie für flexible Container gilt.

Da li ein flexibler Container ist, können Sie mit align-items die untergeordneten Elemente vertikal 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%;
}
<ul>
  <li>This is the text</li>
</ul>

codepen Demo

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

Die align-items-Eigenschaft (für den Container) legt den Standardwert von align-self (für die Elemente) fest. Daher bedeutet align-items: center, dass alle Flex-Elemente auf align-self: center eingestellt sind.

Sie können diesen Standardwert jedoch überschreiben, indem Sie den align-self für einzelne Elemente anpassen. 

Beispielsweise möchten Sie möglicherweise Spalten mit gleicher Höhe, sodass der Container auf align-items: stretch gesetzt ist. Ein Element muss jedoch an der Spitze fixiert sein, daher ist es auf align-self: flex-start gesetzt.

Beispiel

Wie ist der Text ein flexibler Gegenstand?

Einige Leute fragen sich vielleicht, wie eine Textreihe läuft ...

<li>This is the text</li>

ist ein untergeordnetes Element von li.

Der Grund ist, dass Text, der nicht explizit von einem Inline-Level-Element umschlossen wird, algorithmisch von einem Inline-Feld umschlossen wird. Dies macht es zu einem anonymen Inline-Element und einem Kind des übergeordneten Elements.

Aus der CSS-Spezifikation:

9.2.2.1 Anonyme Inline Boxen

Jeder Text, der direkt in einem Blockcontainerelement enthalten ist muss als anonymes Inline-Element behandelt werden.

Die Flexbox-Spezifikation sorgt für ein ähnliches Verhalten.

4. Flex-Artikel

Jedes In-Flow-Kind eines Flex-Containers wird zu einem Flex-Element, und jedes zusammenhängender Textlauf, der direkt in einem Flex enthalten ist Der Container ist in einen anonymen Flex-Artikel eingewickelt.

Daher ist der Text in li ein Flex-Element.

308
Michael_B

Für zukünftige Googler, 

Die am meisten gewählte Antwort und die zweithäufigste ist für das Lösen von diesem spezifischen Problem, das von OP gepostet wurde, wobei der Inhalt (Text) "algorithmisch" in ein Inline-Blockelement eingebettet wurde. ABER, Ihr Fall kann ungefähr ein normales Element vertikal innerhalb eines Containers zentrieren sein, was auch in meinem Fall zutrifft, so dass alles, was Sie brauchen, ist 

align-self: center;

Ich möchte hier nur das hier herausstellen, da dies das beste Ergebnis für die oben genannte Abfrage ist und ich auch ziemlich lange verwirrt war * Derp *

11
Mohd Abdul Mujib

Am besten ist es, eine Flexbox in eine Flexbox zu setzen []. Sie müssen dem Kind nur align-items: center geben. Dadurch wird der Text innerhalb des übergeordneten Elements vertikal ausgerichtet.

// Assuming a horizontally centered row of items for the parent but it doesn't have to be
.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

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

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

0
Swapnil