Mengapa \'margin: auto\' Tidak Memusatkan Elemen Secara Menegak dalam HTML?

Memusatkan Elemen Secara Menegak dengan "margin: auto"

Masalahnya:

Dalam HTML, menggunakan "margin: auto " kepada elemen biasanya memusatkannya secara mendatar dalam bekasnya. Walau bagaimanapun, mengapa ia tidak berkelakuan dengan cara yang sama secara menegak?

Penjelasan:

Mengikut spesifikasi CSS (bahagian 10.6.2 CSS2.1), blok- elemen tahap (cth., div) diletakkan secara menegak dari atas ke bawah tanpa pemusatan automatik. Ini kerana jidar menegak boleh runtuh dalam keadaan tertentu (mis., jidar pada elemen induk).

Dalam senario di mana hanya satu elemen peringkat blok dengan jidar automatik wujud dalam bekas dengan ketinggian automatik, bahagian atasnya dan margin bawah menjadi sifar pula. Walau bagaimanapun, apabila berbilang elemen peringkat blok atau kotak keluar aliran (mis., kelegaan) hadir, gelagat jidar automatik menjadi samar-samar, memerlukan kawalan manual.

Elemen Sebaris dan Terapung:

Untuk elemen sebaris (termasuk garisan atom) dan terapung, jidar kiri dan kanan automatik juga disifarkan. Ini kerana kotak aras sebaris dibentangkan di sepanjang kotak garisan dan apungan mengikut peraturan susun atur yang unik.

Kotak Diposisikan Benar-Benar:

Jing Auto berkelakuan berbeza untuk kedudukan mutlak kotak. Memandangkan ia bebas daripada elemen lain dalam konteks kedudukan yang sama, ia boleh dipusatkan secara menegak menggunakan jidar atas dan bawah automatik.

Flexbox:

Dalam Flexbox, margin auto berkelakuan berbeza lagi. Item fleksibel sedar antara satu sama lain, termasuk kehadiran atau ketiadaannya. Ini membolehkan kawalan yang lebih tepat ke atas gelagat margin, termasuk pemusatan menegak.

Atas ialah kandungan terperinci Mengapa 'margin: auto' Tidak Memusatkan Elemen Secara Menegak dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!