Bagaimana Elemen Pusat `margin: 0 auto` dan Mengapa Ia Tidak Sentiasa Berfungsi?

Elemen Berpusat dengan Margin: 0 Auto Explained

Dalam CSS, pembangun sering menghadapi kesukaran untuk memusatkan elemen menggunakan margin: 0 auto. Untuk mencapai pemusatan yang sempurna, adalah penting untuk memahami cara hartanah ini beroperasi.

Cara Margin: 0 Auto Berfungsi

margin: 0 auto melaraskan jidar mendatar secara automatik elemen untuk memastikan ia berpusat secara mendatar dalam elemen yang mengandungi atau viewport. Teknik ini bergantung pada menetapkan lebar elemen sasaran kepada nilai tertentu, biasanya dinyatakan sebagai peratusan lebar induknya.

Mengapa Ia Mungkin Tidak Berpusat

Jika margin: 0 auto tidak memusatkan elemen, ia biasanya disebabkan oleh lebar elemen sasaran yang tidak ditakrifkan. Dalam contoh kod yang disediakan, div #header mempunyai lebar 100%, tetapi #header ul yang anda ingin pusatkan tidak mempunyai lebar yang ditentukan.

Penyelesaian

Untuk memusatkan senarai tidak tertib dalam div #header, anda perlu menentukan lebar #header ul. Berikut ialah versi kod anda yang dikemas kini dengan pelarasan yang diperlukan:

#header ul {
  margin: 0 auto;
  width: 90%;
}

Dengan menetapkan lebar #header ul kepada 90% daripada lebar induk, kami memastikan ia mempunyai ruang yang mencukupi untuk dipusatkan menggunakan margin : 0 auto. Ini akan memastikan bahawa senarai dipusatkan secara mendatar dalam div #header.

Atas ialah kandungan terperinci Bagaimana Elemen Pusat `margin: 0 auto` dan Mengapa Ia Tidak Sentiasa Berfungsi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!