Bagaimana untuk Mendatar Memusatkan Senarai Tidak Tertib Dalam Div?

Senarai Tidak Tertib Tengah Mendatar dalam Div

Masalah: Memusatkan senarai tidak tertib (

) secara mendatar dalam div menggunakan CSS menimbulkan cabaran. Percubaan untuk menjajarkan senarai menggunakan "text-align: center" atau kedudukan kiri (kiri: 50%) telah terbukti tidak berjaya.

Matlamat: Matlamatnya adalah untuk mencapai penjajaran mendatar yang betul bagi senarai dalam div bekas.

Penyelesaian:

Untuk memusatkan

elemen secara mendatar dalam div, anda boleh menggunakan pelbagai teknik CSS:
1. lebar maksimum dan jidar: Tetapkan lebar maksimum
   elemen dan tambah jidar kiri dan kanan "auto" untuk memusatkannya secara automatik dalam div induk.
   • paparan: blok sebaris dan jajaran teks: Tetapkan paparan elemen kemudiannya akan menjajarkan dirinya sebagai elemen teks dalam teks berpusat.
   • paparan: jadual dan jidar: Sama seperti teknik sebelumnya, tetapkan paparan
     elemen pada "jadual" dan gunakan "margin: auto" untuk menjajarkannya secara berpusat.
     • kedudukan: mutlak, terjemahX dan kiri: Kaedah ini memerlukan penetapan kedudukan
       elemen kepada "mutlak" dan menggunakan kiri dan mengubah sifat untuk menterjemahkannya 50% ke arah bertentangan dan memusatkannya secara mendatar.
       • Reka Letak Kotak Fleksibel: Gunakan Modul Kotak Fleksibel dengan menetapkan paparan daripada div induk kepada "flex" dan menggunakan "justify-content: center" untuk memusatkan
         elemen di dalamnya.

Contoh Kod:

/* Solution 1: max-width and margin */
.container ul {
    max-width: 400px;
    margin: 0 auto;
}

/* Solution 2: display: inline-block and text-align */
.container-2 {
    text-align: center;
}

.container-2 ul {
    display: inline-block;
}

/* Solution 3: display: table and margin */
.container-3 ul {
    display: table;
    margin: 0 auto;
}

/* Solution 4: position: absolute, translateX, and left */
.container-4 ul {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Solution 5: Flexbox Layout */
.container-5 {
    display: flex;
    justify-content: center;
}

.container-5 ul {
    list-style-position: inside;
}

Dengan menggunakan salah satu daripada penyelesaian ini pada CSS anda, anda boleh memusatkan senarai tidak tersusun secara mendatar dalam bekas div.

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