Mengapa `margin: 0 auto` Tidak Memusatkan Elemen Saya?

Mengapa Margin: 0 Auto Tidak Memusatkan Elemen Anda

Apabila cuba menjajarkan elemen secara mendatar menggunakan jidar: 0 sifat auto, adalah penting untuk menentukan lebar elemen yang anda tengahkan, bukan induk elemen.

Pertimbangkan situasi berikut: Anda mempunyai elemen bekas induk (#header) dengan lebar yang ditentukan dan senarai tidak tertib (

) di dalamnya.
elemen hendaklah dipusatkan secara mendatar dalam div #header dengan menggunakan margin: 0 auto. Walau bagaimanapun, jika anda tidak menyatakan lebar
elemen, ia tidak akan berpusat dalam bekas induk.

Untuk menyelesaikan isu ini, tambahkan sifat lebar pada

elemen, sebagai contoh:

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

Ini memberikan lebar 90% kepada

elemen, menyebabkannya berada di tengah dalam div #header.

CSS yang dikemas kini untuk Reka Letak Yang Diperbaiki (Edit):

#header ul {
  list-style: none;
  margin: 0 auto;
  width: 90%;
}

#header ul li {
  color: #CCCCCC;
  display: inline;
  font-size: 20px;
  padding-right: 20px;
}

Gaya yang disemak ini memastikan bahawa elemen dipusatkan dan item senarainya dipaparkan sebaris, mengalih keluar sebarang masalah yang disebabkan oleh penggunaan float: left; dalam

dan mengelakkan penggandaan margin mendatar dalam versi Internet Explorer yang lebih lama.

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