Bagaimanakah `margin: 0 auto;` Memusatkan Elemen Dalam Bekasnya?

Auto: Memusatkan Elemen dalam Bekasnya

Apabila mentakrifkan sifat margin dengan auto sebagai parameter kedua, elemen yang digayakan adalah dengan mudah berpusat di dalam bekas induknya. Ini berlaku kerana:

• Pengiraan Auto: Penyemak imbas secara automatik menentukan jidar kiri dan kanan, membahagikan ruang yang tersedia sama rata antara mereka.
• Sama. Jidar: Jidar kiri dan kanan dijamin mempunyai saiz yang sama untuk memastikan simetri kedudukan.

Pecahan Harta Margin:

margin: 0 auto;

• 0 menetapkan jidar atas dan bawah kepada 0.
• auto secara automatik mengira margin kiri dan kanan untuk memusatkan elemen.

Contoh:

Pertimbangkan bekas induk dengan lebar 100px dan elemen anak dengan lebar 50px. Harta auto akan mengira ruang yang tersedia antara jidar kanak-kanak:

freeSpace = 100 - 50 = 50px
equalShare = 50 / 2 = 25px

Hasilnya:

margin-left: 25px
margin-right: 25px

Elemen anak kini akan dipusatkan dalam bekas induk. Kedudukan ini boleh diperhatikan dalam tindakan melalui [jsFiddle] ini (pautan ke jsFiddle). Ambil perhatian bahawa hanya lebar objek kanak-kanak perlu ditentukan untuk sifat auto berkuat kuasa.

Atas ialah kandungan terperinci Bagaimanakah `margin: 0 auto;` Memusatkan Elemen Dalam Bekasnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!