如何僅使用 CSS 使水平選單居中？

如何居中對齊水平選單

儘管嘗試了各種技術，但您在居中對齊水平選單時遇到了困難。本指南將深入研究該問題並提供經過驗證的解決方案。

HTML 和 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*/
}

解決方案：利用浮動和相對定位

建議的解決方案涉及使用浮動和相對定位。此技術需要將選單包裝在位於螢幕左側的浮動包裝器中。隨後，嵌套列表項被定位在相反的方向，有效地將它們在包裝器內水平居中。

實作

1. 將 float: right 屬性新增至頁面的右側。
2. 在包裝器上設定位置：相對和左側：-50％，將其向左移動 50％，使其與其下方的內容重疊。
3. 透過對 ul 應用position:relative 和 left: 50% 來抵消重疊。
4. 在li 元素上設定float: left 以確保它們浮動
5. 添加樣式以自訂選單外觀，例如文字裝飾、邊距和背景

進一步的考慮因素

此技術保持內容的流動並允許其他元素出現在居中的選單下方。與 JavaScript 解決方案不同，此方法使用 CSS 屬性，確保舊版瀏覽器之間的相容性。