Bagaimanakah saya boleh memusatkan senarai tidak tertib secara mendatar dalam div?

Cara Menjajarkan UL Secara Mendatar di Pusat DIV

Dalam HTML yang diberikan, senarai tidak tertib (

) diletakkan dalam div dan matlamatnya adalah untuk menjajarkannya secara mendatar di tengah-tengah div. Untuk mencapai matlamat ini, anda boleh menggunakan salah satu daripada pendekatan berikut:

Penyelesaian 1: Menggunakan lebar maksimum dan margin

ul {
  max-width: 400px;
  margin: 0 auto;
}

Kaedah ini menetapkan lebar maksimum untuk ul dan menggunakan jidar kiri dan kanan yang sama untuk memusatkannya secara automatik dalam div.

Penyelesaian 2: Menggunakan penjajaran teks dengan blok sebaris

.container {
  text-align: center;
}

ul {
  display: inline-block;
}

Penyelesaian ini menjajarkan div menggunakan penjajaran teks: tengah dan menjadikan ul an elemen blok sebaris. Memandangkan elemen blok sebaris menghormati sifat penjajaran teks, ul menjadi berpusat.

Penyelesaian 3: Menggunakan paparan: jadual dan jidar

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

Kaedah ini melibatkan menetapkan ul untuk dipaparkan sebagai jadual, yang menyebabkan ia berkelakuan sebagai elemen blok dan secara automatik memusatkan dirinya dalam div.

Penyelesaian 4: Menggunakan kedudukan, kiri dan transformasi

.container {
  position: relative;
}

ul {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Pendekatan ini meletakkan ul sepenuhnya dalam div, menggerakkannya 50% dari kiri menggunakan kiri: 50%, dan akhirnya mengalihkannya kembali sebanyak 50% melalui transformasi: translateX(-50%).

Penyelesaian 5: Memanfaatkan Flexbox

.container {
  display: flex;
  justify-content: center;
}

Dengan Flexbox, tetapkan bekas untuk dipaparkan sebagai flexbox dan nyatakan justify-content: pusat memastikan bahawa ul dipusatkan secara mendatar dalam div.

Penyelesaian ini menyediakan pelbagai teknik untuk pusatkan a ul secara mendatar dalam div, membolehkan anda memilih pendekatan yang paling sesuai berdasarkan keserasian penyemak imbas dan tingkah laku yang diingini.

Atas ialah kandungan terperinci Bagaimanakah saya boleh memusatkan senarai tidak tertib secara mendatar dalam div?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!