Anstatt Verwendung zu align-self: center
verwenden align-items: center
.
Es besteht keine Notwendigkeit zu ändern flex-direction
oder 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-self
Eigenschaft gilt für flexible Artikel . Es sei li
denn, Sie sind kein Flex-Element, da das übergeordnete Element - das ul
- nicht vorhanden ist display: flex
oder display: inline-flex
angewendet wurde.
Daher ist das ul
kein Flex-Container, das li
ist kein Flex-Gegenstand und align-self
hat keine Wirkung.
Die align-items
Eigenschaft ist ähnlich align-self
, außer dass sie für Flex-Container gilt .
Da li
es sich um einen Flex-Container handelt, align-items
kö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-items
und wie align-self
...
Die align-items
Eigenschaft (für den Container) legt den Standardwert für align-self
(für die Elemente) fest. Daher align-items: center
bedeutet dies , dass alle Flex-Elemente auf eingestellt sind align-self: center
.
Sie können diese Standardeinstellung jedoch überschreiben, indem Sie die align-self
einzelnen 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 li
ein flexibles Element.
align-items: baseline
. Gut für verschiedene Höhen, die von verschiedenen Unicode-Zeichen usw. stammenDie 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-block
Element 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:quelle
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.quelle
text-align:center
funktioniert nicht alleine Verwenden Siealign-items: center
es damit.ERGEBNIS
HTML
Verwenden Sie
align-items
stattalign-self
und ich habe auch hinzugefügtflex-direction
zucolumn
.CSS
quelle
quelle
quelle
Mit können
display: flex
Sie die vertikale Ausrichtung von HTML-Elementen steuern.quelle
Sie können die
ul
undli
Anzeigen intable
und änderntable-cell
. Dannvertical-align
würde für Sie arbeiten:http://codepen.io/anon/pen/pckvK
quelle