Bagaimana Mendatar Memusatkan Senarai Tidak Tertib Di Dalam Div?

Strategi untuk Memusatkan Elemen HTML Secara Mendatar

Masalah:

Merangkum senarai tidak tertib (

) dalam div dan cuba menjajarkannya secara mendatar menggunakan kaedah seperti text-align: center and kiri: 50% telah terbukti tidak berjaya.

Penyelesaian:

CSS menawarkan pelbagai pendekatan untuk elemen tengah mendatar. Panduan komprehensif ini meneroka lima kaedah berbeza, ditunjukkan dalam coretan kod yang disediakan:

1. Lebar dan Margin Maks: Teknik ini menggunakan lebar dan jidar maks terus kepada elemen yang memerlukan pemusatan. Ia berfungsi dengan baik untuk elemen lebar tetap tetapi terhad kepada keserasian penyemak imbas.
2. Blok Sebaris dan Jajarkan Teks: Menggunakan paparan: blok sebaris menukar elemen kepada teks, membenarkan teks- selaras untuk menjejaskannya. Kaedah ini juga menampung pelbagai lebar dengan berkesan.
3. Paparan: Jadual dan Margin: Sama seperti penyelesaian sebelumnya, pendekatan ini menggunakan paparan: jadual dan jidar pada elemen yang akan dipusatkan, mengekalkan keserasian dengan pelayar lama.
4. Terjemah dan Kedudukan: Teknik ini menggunakan kedudukan: mutlak dan terjemah () untuk memusatkan elemen. Walau bagaimanapun, ia mengalih keluar elemen daripada aliran dokumen, jadi ia harus digunakan dengan berhati-hati.
5. Modul Susun Atur Kotak Fleksibel: Dengan kemunculan Flexbox, elemen pemusatan telah menjadi sangat mudah. Hanya gunakan paparan: flex dan justify-kandungan: tengah pada bekas induk.

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