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>
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
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>
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.
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:
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.
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.
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 *
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;
}
* {
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>