Mengapa Penjajaran Menegak Tidak Berfungsi untuk Elemen Blok Sebaris?

Penjajaran Menegak dalam HTML: Memahami Hadnya

Penjajaran menegak, alat yang berharga untuk menjajarkan elemen secara menegak, terhad kepada elemen HTML tertentu: sebaris, blok sebaris, imej dan jadual. Bertentangan dengan penjajaran teks, penjajaran menegak mesti digunakan pada elemen anak, bukan induk.

Walaupun garis panduan ini, sesetengah pembangun menghadapi kesukaran apabila cuba menggunakan elemen penjajaran menegak:tengah kepada blok sebaris. Untuk memahami sebabnya, kita mesti mendalami konsep kotak garisan.

Kotak Garisan dan Penjajaran Menegak

Penjajaran menegak tidak menjajarkan elemen dalam blok yang mengandunginya tetapi dalam kotak baris mereka. Kotak garis ialah kawasan segi empat tepat yang merangkumi kandungan aras sebaris elemen.

Sebagai contoh, setiap baris teks dalam perenggan berbilang baris membentuk kotak baris. Inilah sebabnya mengapa penjajaran menegak berfungsi dengan sempurna untuk kandungan sebaris seperti

tag.

Contoh:

p { border: 3px solid; width: 350px; height: 200px; line-height: 28px; padding: 15px; }

html, body { height: 100%; }

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>

Dalam contoh ini, setiap baris teks dijajarkan secara menegak dalam kotak barisnya, terima kasih kepada baris yang ditentukan- ketinggian.

Kesimpulan

Inline-block elemen, diletakkan secara mendatar dalam blok kandungannya, tidak mempunyai keupayaan penjajaran menegak kandungan sebaris. Untuk mencapai penjajaran menegak, seseorang mesti sama ada menggunakan kaedah alternatif atau mempertimbangkan untuk menukar blok sebaris kepada elemen peringkat blok.

Atas ialah kandungan terperinci Mengapa Penjajaran Menegak Tidak Berfungsi untuk Elemen Blok Sebaris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!