Alih-alih menggunakan align-self: center
gunakan align-items: center
.
Tidak perlu diubah flex-direction
atau digunakan text-align
.
Inilah kode Anda, dengan satu penyesuaian, agar semuanya berfungsi:
ul {
height: 100%;
}
li {
display: flex;
justify-content: center;
/* align-self: center; <---- REMOVE */
align-items: center; /* <---- NEW */
background: silver;
width: 100%;
height: 20%;
}
The align-self
properti berlaku untuk item fleksibel . Kecuali Anda li
bukan item fleksibel karena induknya - the ul
- tidak memiliki display: flex
atau display: inline-flex
menerapkan.
Oleh karena itu, ul
ini bukan wadah fleksibel, li
bukan barang fleksibel, dan align-self
tidak memiliki efek.
The align-items
properti ini mirip dengan align-self
, kecuali itu berlaku untuk wadah fleksibel .
Karena li
wadah fleksibel, align-items
dapat digunakan untuk memusatkan elemen anak secara vertikal.
* {
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
Secara teknis, begini caranya align-items
dan align-self
bekerja ...
The align-items
properti (pada wadah) menetapkan nilai default align-self
(pada item). Karena itu, align-items: center
berarti semua item fleksibel akan diatur ke align-self: center
.
Tetapi Anda dapat mengganti default ini dengan menyesuaikan align-self
pada item individual.
Misalnya, Anda mungkin menginginkan kolom ketinggian yang sama, sehingga wadah diatur ke align-items: stretch
. Namun, satu item harus disematkan ke atas, sehingga diatur ke align-self: flex-start
.
contoh
Bagaimana teks item fleksibel?
Beberapa orang mungkin bertanya-tanya bagaimana serangkaian teks ...
<li>This is the text</li>
adalah elemen anak dari li
.
Alasannya adalah bahwa teks yang tidak secara eksplisit dibungkus oleh elemen tingkat inline secara algoritmik dibungkus oleh kotak inline. Ini menjadikannya elemen inline anonim dan anak dari induk.
Dari spec CSS:
9.2.2.1 Kotak inline anonim
Teks apa pun yang secara langsung terkandung di dalam elemen kontainer blok harus diperlakukan sebagai elemen inline anonim.
Spesifikasi flexbox menyediakan perilaku serupa.
4. Item Flex
Setiap anak dalam aliran dari wadah fleksibel menjadi item fleksibel, dan setiap rangkaian teks yang berdekatan yang langsung terkandung di dalam wadah fleksibel dibungkus dalam item fleksibel anonim.
Oleh karena itu, teks dalam li
item fleksibel.
align-items: baseline
. Baik untuk ketinggian berbeda yang berasal dari karakter unicode yang berbeda, dll.Jawaban yang paling banyak dipilih adalah untuk menyelesaikan masalah khusus ini yang diposting oleh OP, di mana konten (teks) sedang dibungkus di dalam suatu
inline-block
elemen. Beberapa kasus mungkin tentang memusatkan elemen normal secara vertikal di dalam wadah , yang juga diterapkan dalam kasus saya, jadi untuk itu yang Anda butuhkan adalah:sumber
Langkah terbaik adalah dengan hanya meletakkan kotak di dalam kotak . Yang harus Anda lakukan adalah memberi anak itu
align-items: center
. Ini akan menyelaraskan teks di dalam induknya secara vertikal.sumber
text-align:center
tidak bekerja sendiri. Gunakanalign-items: center
dengannya.HASIL
HTML
Gunakan
align-items
bukannyaalign-self
dan saya juga menambahkanflex-direction
untukcolumn
.CSS
sumber
sumber
sumber
Menggunakan
display: flex
Anda dapat mengontrol perataan vertikal elemen HTML.sumber
Anda dapat mengubah
ul
danli
menampilkan ketable
dantable-cell
. Maka,vertical-align
akan bekerja untuk Anda:http://codepen.io/anon/pen/pckvK
sumber