Bagaimana untuk Memusatkan Menu `` Mendatar Tanpa JavaScript?

Cara Menjajarkan Mendatar

Menu Tanpa JavaScript

Menu mendatar biasanya digunakan untuk memaparkan pautan navigasi atau kategori pada tapak web. Penjajaran tengah menu ini boleh meningkatkan daya tarikan visual dan meningkatkan pengalaman pengguna. Walau bagaimanapun, untuk mencapai penjajaran yang sempurna boleh menjadi mencabar. Satu isu biasa ialah walaupun menu secara keseluruhan mungkin berpusat, item senarai individu di dalamnya kekal dijajar kiri.

Melaksanakan Penyelesaian

Untuk mengatasi isu ini, kami boleh menggunakan teknik berikut:

1. Balut
   menu dalam
   bekas, yang akan berfungsi sebagai pembalut terapung.
   Gunakan apungan: kiri pada elemen pembalut untuk menjajarkannya ke kiri induknya.
   Jadikan pembalut tanpa lebar dengan menetapkan sifat lebarnya kepada auto.
   Gunakan kedudukan: relatif dan kiri: -50% untuk mengalihkan pembalut ke kiri, memusatkannya dengan berkesan secara mendatar.
   Gunakan kedudukan: relatif dan kiri: 50% pada
   elemen dalam pembungkus untuk membalikkan kedudukan dan menjajarkannya ke tengah.
   • Untuk memastikan item menu terapung dalam
     , tetapkan apungan: kiri untuk
     • elemen.

Hasil

Dengan melaksanakan langkah-langkah ini, menu mendatar akan dipusatkan secara mendatar dan item senarai akan diselaraskan dalam menu. Teknik ini mencapai pemusatan tanpa memerlukan JavaScript, menawarkan penyelesaian silang penyemak imbas untuk pelbagai peranti dan saiz skrin.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Menu `` Mendatar Tanpa JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!