Rumah >hujung hadapan web >tutorial css >Mengapa Menjajarkan Menegak Elemen Kanak-kanak Mempengaruhi Penjajaran Ibu Bapa dalam CSS?

Mengapa Menjajarkan Menegak Elemen Kanak-kanak Mempengaruhi Penjajaran Ibu Bapa dalam CSS?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-12-06 08:23:101012semak imbas

Why Does Vertical-Aligning a Child Element Affect the Parent's Alignment in CSS?

Gelagat Penjajaran Menegak dalam CSS

Apabila menggunakan sifat penjajaran menegak, mungkin tidak dijangka bahawa penggunaannya pada satu elemen boleh menjejaskan penjajaran elemen lain di sekitar. Ini tidak semestinya pepijat atau ralat tetapi sebaliknya akibat dari cara sifat itu berfungsi.

Dalam CSS, penjajaran menegak mentakrifkan penjajaran menegak sesuatu elemen berbanding dengan elemen sekelilingnya. Apabila digunakan pada elemen sebaris seperti , ia menjajarkan elemen secara menegak dalam elemen induknya, yang biasanya merupakan elemen peringkat blok seperti

atau

.

Dalam contoh yang disediakan, elemen mempunyai nilai penjajaran menegak tengah, yang menunjukkan bahawa ia harus dipusatkan secara menegak dalam induknya

unsur. Walau bagaimanapun, sejak elemen mempunyai ketinggian yang ditentukan, ia akan menduduki keseluruhan ruang yang diperuntukkan kepadanya dalam

, dengan berkesan menolak elemen induk ke bawah.

Induk

elemen, pula, mempunyai latar belakang kuning, yang memanjang untuk memenuhi ruang yang diduduki oleh . Sejak

ialah elemen peringkat blok, ia melaraskan ketinggiannya untuk menampung dan selaraskan keseluruhan blok secara menegak dalam bekasnya.

Oleh itu, hasil yang tidak dijangka bukanlah kandungan tidak dijajarkan secara menegak, sebaliknya keseluruhan

elemen dijajarkan kerana penjajaran menegak yang digunakan pada anak. Ini ialah gelagat jangkaan penjajaran menegak dalam konteks yang diberikan.

Atas ialah kandungan terperinci Mengapa Menjajarkan Menegak Elemen Kanak-kanak Mempengaruhi Penjajaran Ibu Bapa dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn