Mengapa Gunakan `align-item: center` Daripada `align-self: center` untuk Penjajaran Teks Menegak dalam Flexbox?

Penjajaran Menegak Teks dalam Kotak Flex

Apabila cuba menjajarkan teks secara menegak dalam kotak fleksibel, menggunakan align-self: center mungkin tidak menghasilkan hasil yang diingini. Sebaliknya, adalah dinasihatkan untuk menggunakan item jajar: tengah untuk mencapai penjajaran menegak dengan berkesan.

ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  align-items: center;  /* Use align-items instead of align-self */
  background: silver;
  width: 100%;
  height: 20%;
}

Menggunakan item penjajaran: pusat secara langsung mempengaruhi bekas flex, manakala align-self: tengah digunakan untuk item flex. Memandangkan li mewujudkan bekas fleksibel dalam kes ini, align-item: tengah menjajarkan elemen kanak-kanak dengan betul secara menegak.

<ul>
  <li>This is the text</li>
</ul>

Ringkasnya, untuk penjajaran teks menegak dalam kotak fleksibel, align-item: tengah harus menggantikan align- diri: pusat. Ini memastikan bekas flex induk meletakkan elemen anaknya dengan betul secara menegak, menghasilkan kesan penjajaran yang diingini.

Atas ialah kandungan terperinci Mengapa Gunakan `align-item: center` Daripada `align-self: center` untuk Penjajaran Teks Menegak dalam Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!