Bagaimana untuk Menjajarkan Teks Secara Menegak dalam Elemen `` Menggunakan Flexbox Tanpa Pembalut?

Menjajarkan Teks dalam Kotak Flex secara menegak

Apabila menggunakan flexbox untuk menjajarkan kandungan secara menegak dalam

elemen, anda mungkin menghadapi beberapa cabaran. Banyak tutorial dalam talian mencadangkan menggunakan div pembalut untuk mencapai penjajaran ini dengan menetapkan item penjajaran: tengah kepada tetapan flex induk. Walau bagaimanapun, adalah mungkin untuk menghapuskan keperluan untuk elemen tambahan.

Untuk mencapai penjajaran menegak tanpa div pembalut, laraskan align-self: center kepada align-item: center. Pengubahsuaian mudah ini memastikan penjajaran yang berkesan:

ul {
  height: 100%;
}

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

Ingat bahawa align-self terpakai pada item flex, yang memerlukan bekas fleksibel dengan paparan: flex atau paparan: inline-flex. Dalam kes ini,

ialah bekas flex, jadi align-item ialah sifat yang sesuai untuk penjajaran menegak.

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Teks Secara Menegak dalam Elemen `` Menggunakan Flexbox Tanpa Pembalut?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!