Bagaimanakah `margin: 0 auto;` Memusatkan Elemen?

Memahami Kata Kunci auto dalam jidar: 0 auto

Sifat jidar membolehkan anda mengawal ruang di sekeliling elemen. Apabila anda menggunakan margin: 0 auto;, ia menimbulkan soalan, "Apakah sebenarnya yang dilakukan oleh auto dan bagaimana ia mempengaruhi penjajaran elemen?"

Auto, apabila digunakan dalam parameter kedua sifat margin (cth., margin-left: auto;), mengarahkan penyemak imbas untuk menentukan secara automatik kedua-dua jidar kiri dan kanan. Ini secara berkesan memusatkan elemen secara mendatar dalam bekas induknya.

Auto untuk parameter kedua memastikan pengagihan ruang yang sama antara jidar kiri dan kanan. Parameter pertama 0 menunjukkan bahawa jidar atas dan bawah akan ditetapkan kepada 0.

Untuk menggambarkan, pertimbangkan contoh di mana elemen induk mempunyai lebar 100px dan elemen anak mempunyai lebar 50px. Auto menentukan bahawa terdapat 50px ruang yang tersedia untuk diagihkan sama rata antara jidar-kiri dan jidar-kanan:

var freeSpace = 100 - 50;
var equalShare = freeSpace / 2;

Ini menghasilkan nilai jidar berikut:

margin-left: 25;
margin-right: 25;

Oleh itu, elemen anak dipusatkan secara mendatar dalam induk.

Adalah penting untuk ambil perhatian bahawa anda tidak perlu menentukan induk lebar untuk tingkah laku ini berlaku. Hanya mentakrifkan lebar objek kanak-kanak dan menggunakan margin: 0 auto; sudah memadai untuk memusatkannya secara mendatar.

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