Zamiast używać align-self: center
use align-items: center
.
Nie ma potrzeby zmiany flex-direction
ani używania text-align
.
Oto twój kod z jedną korektą, aby wszystko działało:
ul {
height: 100%;
}
li {
display: flex;
justify-content: center;
/* align-self: center; <---- REMOVE */
align-items: center; /* <---- NEW */
background: silver;
width: 100%;
height: 20%;
}
align-self
Właściwość dotyczy Flex przedmiotów . Tyle że twój li
nie jest elementem elastycznym, ponieważ jego element nadrzędny - ul
nie ma - display: flex
lub nie został display: inline-flex
zastosowany.
Dlatego ul
nie jest to elastyczny pojemnik, li
nie jest elastyczny i align-self
nie ma żadnego efektu.
align-items
Nieruchomość jest podobna do align-self
, oprócz tego, że odnosi się do typu flex pojemnikach .
Ponieważ li
jest to elastyczny pojemnik, align-items
można go użyć do pionowego wyśrodkowania elementów potomnych.
* {
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>
demo codepen
Technicznie oto jak align-items
i jak align-self
działa ...
align-items
Nieruchomość (na zbiorniku) ustawia domyślną wartość align-self
(w sztukach). Oznacza align-items: center
to , że wszystkie elementy Flex zostaną ustawione na align-self: center
.
Możesz jednak zmienić to ustawienie domyślne, dostosowując align-self
poszczególne elementy.
Na przykład możesz chcieć kolumn o jednakowej wysokości, więc kontener jest ustawiony na align-items: stretch
. Jednak jeden element musi być przypięty do góry, więc jest ustawiony na align-self: flex-start
.
przykład
W jaki sposób tekst jest elementem elastycznym?
Niektórzy ludzie mogą się zastanawiać, jak ciąg tekstu ...
<li>This is the text</li>
jest elementem potomnym li
.
Powodem jest to, że tekst, który nie jest jawnie zawinięty przez element poziomu śródliniowego, jest algorytmicznie zawijany przez pole śródliniowe. To sprawia, że jest anonimowym elementem wbudowanym i dzieckiem elementu nadrzędnego.
Ze specyfikacji CSS:
9.2.2.1 Anonimowe pola śródliniowe
Każdy tekst zawarty bezpośrednio w elemencie kontenera bloku musi być traktowany jako anonimowy element wbudowany.
Specyfikacja Flexbox zapewnia podobne zachowanie.
4. Zegnij przedmioty
Każde dziecko przepływające w kontenerze elastycznym staje się elementem elastycznym, a każdy ciągły ciąg tekstu, który jest bezpośrednio zawarty w elastycznym kontenerze, jest zawijany w anonimowy element elastyczny.
Dlatego tekst w li
elemencie jest elementem elastycznym.
align-items: baseline
. Dobre dla różnych wysokości pochodzących z różnych znaków Unicode itp.Najczęściej głosowana odpowiedź dotyczy rozwiązania tego konkretnego problemu opublikowanego przez OP, w którym treść (tekst) była zawijana w
inline-block
element. Niektóre przypadki mogą dotyczyć centrowania normalnego elementu w pionie wewnątrz kontenera , co również miało zastosowanie w moim przypadku, więc do tego wystarczy:źródło
Najlepszym ruchem jest po prostu zagnieżdżenie Flexboksa w Flexboksie . Wszystko, co musisz zrobić, to dać dziecku
align-items: center
. Spowoduje to wyrównanie tekstu w pionie wewnątrz jego elementu nadrzędnego.źródło
text-align:center
nie działa sam. Skorzystajalign-items: center
z tym.WYNIK
HTML
Użyj
align-items
zamiast,align-self
a także dodałemflex-direction
docolumn
.CSS
źródło
źródło
źródło
Za pomocą
display: flex
możesz kontrolować pionowe wyrównanie elementów HTML.źródło
Można zmienić
ul
ili
wyświetlaczy dotable
atable-cell
. Wtedyvertical-align
pracowałby dla ciebie:http://codepen.io/anon/pen/pckvK
źródło