Bagaimana untuk Memusatkan Menu Mendatar Hanya Menggunakan CSS?

Cara Menjajarkan Menu Mendatar ke Tengah

Anda menghadapi kesukaran untuk menjajarkan menu melintang di tengah, walaupun mencuba pelbagai teknik. Panduan ini akan menyelidiki isu ini dan menyediakan penyelesaian yang terbukti.

Kod HTML dan CSS

<div class="topmenu-design">
    <ul></ul>
<pre class="brush:php;toolbar:false">#buttons {
    float: right;
    position: relative;
    left: -50%;
    text-align: left;
}

#buttons ul {
    list-style: none;
    position: relative;
    left: 50%;
}

#buttons li {
    float: left;
    position: relative;
}

#buttons a {
    text-decoration: none;
    margin: 10px;
    background: red;
    float: left;
    border: 2px outset blue;
    color: #fff;
    padding: 2px 5px;
    text-align: center;
    white-space: nowrap;
}

#buttons a:hover {
    border: 2px inset blue;
    color: red;
    background: #f2f2f2;
}

#content {
    overflow: hidden; /* hide horizontal scrollbar*/
}

Penyelesaian: Menggunakan Float dan Kedudukan Relatif

Yang disyorkan penyelesaian melibatkan penggunaan apungan dan kedudukan relatif. Teknik ini memerlukan pembalut menu dalam pembalut terapung yang diletakkan di luar skrin di sebelah kiri. Selepas itu, item senarai bersarang diletakkan dalam arah yang bertentangan, dengan berkesan memusatkannya secara mendatar dalam pembungkus.

Pelaksanaan

1. Tambahkan apungan: harta kanan pada div induk untuk menjajarkannya di sebelah kanan halaman.
2. Tetapkan kedudukan: relatif dan kiri: -50% pada pembalut untuk beralih ia 50% ke kiri, menyebabkan ia bertindih dengan kandungan di bawahnya.
3. Hampas tindihan dengan menggunakan kedudukan: relatif dan kiri: 50% pada ul.
4. Tetapkan apungan: dibiarkan hidup elemen li untuk memastikan ia terapung dibiarkan dalam ul.
5. Tambah gaya untuk menyesuaikan penampilan menu, seperti hiasan teks, jidar dan latar belakang warna.

Pertimbangan Lanjut

Teknik ini mengekalkan aliran kandungan dan membenarkan elemen lain muncul di bawah menu tengah. Tidak seperti penyelesaian JavaScript, pendekatan ini menggunakan sifat CSS, memastikan keserasian merentas pelayar lama.