Wie kann ich Text in einer Flexbox vertikal ausrichten?

Ich möchte Flexbox verwenden, um einige Inhalte in einem vertikal auszurichten, <li>aber keinen großen Erfolg zu haben.

Ich habe online nachgesehen und viele der Tutorials verwenden tatsächlich ein Wrapper-Div, das align-items:centerdie Flex-Einstellungen des übergeordneten Elements abruft. Ich frage mich jedoch, ob es möglich ist, dieses zusätzliche Element auszuschneiden.

Ich habe mich in diesem Fall für die Verwendung von Flexbox entschieden, da die Listenelementhöhe dynamisch 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>

Anstatt Verwendung zu align-self: centerverwenden align-items: center.

Es besteht keine Notwendigkeit zu ändern flex-directionoder zu verwenden text-align.

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 align-selfEigenschaft gilt für flexible Artikel . Es sei lidenn, Sie sind kein Flex-Element, da das übergeordnete Element - das ul- nicht vorhanden ist display: flexoder display: inline-flexangewendet wurde.

Daher ist das ulkein Flex-Container, das liist kein Flex-Gegenstand und align-selfhat keine Wirkung.

Die align-itemsEigenschaft ist ähnlich align-self, außer dass sie für Flex-Container gilt .

Da lies sich um einen Flex-Container handelt, align-itemskönnen die untergeordneten Elemente vertikal zentriert werden.

* {
  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 ist hier, wie align-itemsund wie align-self...

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

Sie können diese Standardeinstellung jedoch überschreiben, indem Sie die align-selfeinzelnen Elemente anpassen .

Beispielsweise möchten Sie möglicherweise Spalten mit gleicher Höhe, sodass der Container auf festgelegt ist align-items: stretch. Ein Element muss jedoch oben angeheftet sein, damit es festgelegt wird align-self: flex-start.

Beispiel

Wie ist der Text ein flexibles Element?

Einige Leute fragen sich vielleicht, wie ein Textlauf ...

<li>This is the text</li>

ist ein untergeordnetes Element der li.

Der Grund dafür ist, dass Text, der nicht explizit von einem Inline-Element umbrochen wird, algorithmisch von einem Inline-Feld umbrochen wird. Dies macht es zu einem anonymen Inline-Element und 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 sieht ein ähnliches Verhalten vor.

4. Flex Items

Jedes untergeordnete Element eines Flex-Containers wird zu einem Flex-Element, und jeder zusammenhängende Textlauf, der direkt in einem Flex-Container enthalten ist, wird in ein anonymes Flex-Element eingeschlossen.

Daher ist der Text in der liein flexibles Element.

Die am häufigsten gewählte Antwort ist die Lösung dieses von OP veröffentlichten spezifischen Problems , bei dem der Inhalt (Text) in ein inline-blockElement eingeschlossen wurde. In einigen Fällen geht es möglicherweise darum, ein normales Element vertikal in einem Container zu zentrieren , was auch in meinem Fall der Fall ist. Dazu benötigen Sie lediglich:

align-self: center;

Am besten verschachteln Sie eine Flexbox in einer Flexbox . Alles was Sie tun müssen, ist das Kind zu geben align-items: center. Dadurch wird der Text innerhalb des übergeordneten Texts 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;
}

ERGEBNIS

HTML

<ul class="list">
  <li>This is the text</li>
  <li>This is another text</li>
  <li>This is another another text</li>
</ul>

Verwenden Sie align-itemsstatt align-selfund ich habe auch hinzugefügt flex-directionzu column.

CSS

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

html,
body {
  height: 100%;
}

.list {
  display: flex;
  justify-content: center;
  flex-direction: column;  /* <--- I added this */
  align-items: center;   /* <--- Change here */
  height: 100px;
  width: 100%;
  background: silver;
}

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

Mit können display: flexSie die vertikale Ausrichtung von HTML-Elementen steuern.

.box {
  height: 100px;
  display: flex;
  align-items: center; /* Vertical */
  justify-content: center; /* Horizontal */
  border:2px solid black;
}

.box div {
  width: 100px;
  height: 20px;
  border:1px solid;
}

<div class="box">
  <div>Hello</div>
  <p>World</p>
</div>

Sie können die ulund liAnzeigen in tableund ändern table-cell. Dann vertical-alignwürde für Sie arbeiten:

ul {
    height: 20%;
    width: 100%;
    display: table;
}

li {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background: silver;
    width: 100%; 
}

http://codepen.io/anon/pen/pckvK