Mengapa Elemen Sekat Sebaris Pusat Menjajarkan Menegak Dalam Bekasnya?

Memahami Penjajaran Menegak untuk Elemen Blok Sebaris

Walaupun dokumentasi mencadangkan bahawa penjajaran menegak berfungsi untuk elemen blok sebaris, ia boleh mengelirukan apabila ia gagal diselaraskan seperti yang diharapkan. Untuk menjelaskannya, mari kita mendalami konsep ini dengan lebih mendalam.

Skop Penjajaran Menegak

Tidak seperti penjajaran teks, yang melaraskan penjajaran teks dalam kawasan kandungan elemen induknya, menegak- align beroperasi dalam kotak baris elemen. Kotak garis ialah kawasan segi empat tepat yang merangkumi kotak yang dijana oleh elemen aras sebaris pada satu baris.

Contoh:

Pertimbangkan perkara berikut kod:

#wrapper {
  border: 1px solid black;
  width: 500px;
  height: 500px;
}
#content {
  border: 1px solid black;
  display: inline-block;
  vertical-align: middle;
}

<div>

Masalah:

Dalam contoh ini, tetapan penjajaran menegak: tengah tidak memusatkan elemen #content secara menegak dalam #pembungkus div.

Penjelasan:

Menjajarkan menegak tidak menjajarkan elemen blok sebaris berbanding blok bekasnya tetapi sebaliknya dalam kotak barisnya sendiri. Memandangkan elemen #content hanya mengandungi teks, yang sudah berpusat menegak berdasarkan lalai menegak-jajar: garis dasar, ia tidak mempunyai kesan pada penjajaran akhir.

Kesimpulan:

Apabila bekerja dengan penjajaran menegak untuk elemen blok sebaris, adalah penting untuk memahami bahawa ia menjajarkan kandungan dalam kotak garis elemen, bukan blok yang mengandunginya. Ingat perkara ini untuk mencapai kedudukan menegak yang diingini dalam elemen halaman anda.

Atas ialah kandungan terperinci Mengapa Elemen Sekat Sebaris Pusat Menjajarkan Menegak Dalam Bekasnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!