Mengapa \'margin: auto\' Menegak Pusat Elemen?

Teka-teki Pemusatan Menegak dengan "margin: auto"

Dalam dunia CSS, sifat "margin: auto" ialah alat yang popular untuk elemen berpusat mendatar. Walau bagaimanapun, apabila ia berkaitan dengan penjajaran menegak, ia sering gagal.

Seperti yang terbukti dalam contoh yang diberikan, div biru dengan "margin: auto" mudah dipusatkan secara mendatar, tetapi kekal tidak dilaraskan secara menegak. Sebabnya terletak pada spesifikasi CSS2.1 (bahagian 10.6.2).

Dalam reka letak blok, elemen disusun secara menegak dan jidar mungkin runtuh. Untuk kotak blok kendiri dengan ketinggian automatik dan induk bersempadan, jidar secara semula jadi disifarkan. Walau bagaimanapun, apabila berbilang kotak blok diperkenalkan atau reka letak kesan elemen tambahan (cth., kelegaan), jidar automatik menjadi samar-samar dan memerlukan penyelesaian lanjut.

Begitu juga, unsur sebaris (termasuk sebaris atom) dan terapung tidak boleh berpusat secara menegak dengan auto margin kerana peraturan susun atur khusus mereka. Walau bagaimanapun, kotak yang diletakkan secara mutlak tidak mempunyai had sedemikian kerana ia tidak dipengaruhi oleh elemen lain dalam konteks kedudukannya. Flexbox, sebaliknya, menawarkan pendekatan yang berbeza untuk susun atur, membolehkan jidar auto item flex dikira berkenaan dengan bekas flex kerana kesedaran mereka yang wujud terhadap item flex lain.

Oleh itu, sementara " margin: auto" memusatkan elemen secara mendatar dengan berkesan, ia kurang dalam pemusatan menegak disebabkan oleh kerumitan susun atur blok dan kesamaran yang timbul apabila berbilang elemen terlibat.

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