Mengapakah `vertical-align` Menjejaskan Lebih Daripada Sekadar Elemen Sasaran?

Penjajaran Menegak: Memahami Perkara yang Tidak Dijangka

Apabila meneroka kefungsian penjajaran menegak, kita menghadapi fenomena yang pelik. Secara teorinya, menggunakan penjajaran menegak pada elemen sebaris, seperti , hendaklah menjajarkan elemen itu sahaja. Walau bagaimanapun, dalam amalan, kami memerhatikan bahawa elemen lain, seperti yang mengandungi

, juga kelihatan sejajar secara menegak.

Tingkah Laku yang Dijangka atau Sesuatu yang Lain?

Tingkah laku ini sememangnya hasil yang diharapkan. Jajaran menegak menentukan penjajaran elemen dalam kotak garis. Apabila digunakan pada elemen tertentu, ia bukan semata-mata melaraskan kedudukan kandungan elemen itu tetapi mempengaruhi penjajaran keseluruhan keseluruhan baris.

Mekanisme Penjajaran Menegak

Tanpa menyatakan penjajaran menegak, elemen dijajarkan mengikut garis dasarnya. Apabila penjajaran menegak diperkenalkan, ia mewujudkan garis rujukan baharu dalam kotak baris. Unsur tidak sejajar akan diselaraskan dengan garis rujukan ini, manakala unsur sejajar akan diletakkan sama ada di atas atau di bawahnya.

Dalam contoh yang disediakan:

• The

  dan tidak mempunyai penjajaran yang wujud.

• Apabila penjajaran menegak digunakan pada , ia mewujudkan garis rujukan baharu di tengah ketinggiannya.

• menjajarkan ke baris rujukan ini, menaikkan teksnya untuk muncul bersama .

• Teks kekal sejajar dengan garis dasarnya sendiri, yang lebih rendah daripada garis rujukan. Akibatnya, teks muncul di bawah teks dalam

  .

Kesimpulan

Penjajaran yang tidak dijangka yang diperhatikan dalam senario ini bukanlah pepijat melainkan kesan yang dimaksudkan bagi penjajaran menegak. Dengan mewujudkan garis rujukan dalam kotak garisan, jajaran menegak memastikan semua elemen dalam baris itu dijajarkan secara menegak antara satu sama lain, termasuk unsur yang tidak dinyatakan secara eksplisit.

Atas ialah kandungan terperinci Mengapakah `vertical-align` Menjejaskan Lebih Daripada Sekadar Elemen Sasaran?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!