Mengapa `margin: 0 auto;` Tidak Memusatkan Senarai Tidak Tertib Saya?

Mengapa Saya Tidak Boleh Memusatkan Elemen dengan Margin: 0 Auto?

Anda cuba memusatkan senarai tidak tertib dalam pengepala div menggunakan margin: 0 auto. Walau bagaimanapun, margin auto sahaja tidak mencukupi untuk pemusatan. Inilah sebabnya:

Memahami Auto Margin

margin: 0 auto menetapkan jidar kiri dan kanan kepada auto, menyebabkan elemen dipusatkan secara mendatar. Walau bagaimanapun, ini hanya berfungsi jika lebar elemen ditakrifkan secara eksplisit.

Dalam Kod Anda:

#header ul {
  margin: 0 auto;
}

Anda telah menentukan lebar div pengepala, tetapi bukan lebar senarai tidak tertib. Oleh itu, margin: 0 auto tidak mempunyai kesan pada pemusatan senarai.

Penyelesaian:

Untuk memusatkan senarai, anda perlu menentukan lebarnya secara eksplisit:

#header ul {
  margin: 0 auto;
  width: 620px;  // or any desired width
}

Pertimbangan Tambahan:

Jika anda mahu mendatar memusatkan elemen seperti senarai item dalam senarai, tentukan lebar dan gunakan paparan: sebaris atau terapung: kiri. Walau bagaimanapun, ambil perhatian bahawa unsur terapung boleh berkelakuan tidak dapat diramalkan, jadi biasanya disyorkan untuk menggunakan sebaris.

Sebagai contoh, untuk memusatkan item senarai:

#header ul li {
  display: inline;
}

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