Bagaimana untuk Memusatkan Senarai Tidak Tertib (``) Di Dalam Div?

Bagaimana untuk Menjajarkan ul secara Mendatar ke Pusat div?

Apabila berhadapan dengan memusatkan senarai tidak tertib (

) dalam div menggunakan CSS, terdapat beberapa penyelesaian untuk menangani cabaran ini. Berikut ialah pecahan CSS yang disediakan dan kaedah yang dicadangkan untuk mencapai hasil yang anda inginkan:

CSS yang diberikan:

.container { 
    clear: both; 
    width: 800px; 
    height: 70px; 
    margin-bottom: 10px;
    text-align: center;
}

.container ul { 
    padding-left: 20px; 
    margin: 0; 
    list-style: none;
}

.container ul li { 
    margin: 0; 
    padding: 0; 
}

Dengan property text-align: center; digunakan pada .container, nampaknya anda menyasarkan untuk memusatkan segala-galanya dalam bekas, termasuk ul. Walau bagaimanapun, sifat ini hanya menjajarkan kandungan teks elemen, bukan elemen itu sendiri.

Berikut ialah beberapa pendekatan untuk mendatar memusatkan ul anda dalam div:

Penyelesaian 1: Menggunakan auto margin:

Kaedah ini melibatkan penetapan margin: 0 auto; pada ul, membenarkan ia mempunyai jidar digunakan secara simetri, dengan berkesan meletakkannya di tengah:

.container ul {
    margin: 0 auto;
}

Penyelesaian 2: Menggunakan paparan: jadual;:

Ini penyelesaian mengambil kesempatan daripada mod pemaparan jadual bagi sifat paparan. Dengan menetapkan paparan: jadual; pada ul, anda mengubahnya menjadi bekas meja. Kemudian, margin: 0 auto; akan memusatkan ul dalam div dengan cara yang sama seperti dalam Penyelesaian 1:

.container ul {
    display: table;
    margin: 0 auto;
}

Penyelesaian 3: Melaksanakan penjajaran teks: pusat; dan blok sebaris:

Kaedah ini menggunakan paparan: blok sebaris; harta di ul. Apabila digabungkan dengan text-align: center; pada bekas induk, ia meletakkan ul di tengah sebagai elemen sebaris dalam aliran teks:

.container { 
    text-align: center;
}

.container ul { 
    display: inline-block;
}

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Senarai Tidak Tertib (``) Di Dalam Div?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!