Wie kann ich Text in einer Flexbox vertikal ausrichten?

424

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>

Styler
quelle

Antworten:

542

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.

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.

Michael Benjamin
quelle
2
Ich mag align-items: baseline. Gut für verschiedene Höhen, die von verschiedenen Unicode-Zeichen usw. stammen
qräbnö
1
Vielen Dank für die Erklärung und Verknüpfung mit dem Konzept der anonymen Inline-Boxen. Dies hilft wirklich zu klären, warum einige Effekte, die Sie durch Ausprobieren erzielen können, so funktionieren, wie sie funktionieren.
Squarecandy
39

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;
Mohd Abdul Mujib
quelle
25

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;
}
Serraosays
quelle
Wenn Sie einen perfekt zentrierten Text wünschen. text-align:centerfunktioniert nicht alleine Verwenden Sie align-items: centeres damit.
Tzwenni
7

ERGEBNIS

Geben Sie hier die Bildbeschreibung ein

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%; 
}
Wilson
quelle
1

* {
  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>

Anatoly Gorchuk
quelle
0

* {
  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>

Swapnil
quelle
Nur-Code-Antworten sind nicht sehr nützlich. Fügen Sie Kommentare oder eine Erklärung hinzu, was Sie getan haben und warum es funktioniert.
random_user_name
0

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>

Ankur Prajapati
quelle
-6

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

LcSalazar
quelle
Funktioniert gut, bis Sie dort ein weiteres Listenelement hinzufügen.
George
1
Stimmt ... Aber das wurde nie erwähnt
LcSalazar
Sie haben die Höhe auf die ul anstatt auf die li geschaltet? Jede Li-Höhe wird dynamisch sein, so dass ich das nicht fürchten könnte
Styler
@LcSalazar Normalerweise würden Sie keine Liste verwenden, wenn Sie nur ein Element haben möchten. Dafür sind Divs da.
Ben Visness
2
Wieder wahr ... Aber ich sage nicht, dass dies das perfekte Szenario ist. Ich habe gerade eine Lösung veröffentlicht, die die Frage so beantwortet, wie sie ist. Ich hoffe, diese Informationen könnten jemand anderem nützlich sein, der sie liest und ein anderes Szenario hat ...
LcSalazar