如何仅使用 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. 向父 div 添加 float: right 属性以使其对齐到页面的右侧。
2. 在包装器上设置位置：相对和左侧：-50％，将其向左移动 50％，使其与其下方的内容重叠。
3. 通过对 ul 应用position:relative 和 left: 50% 来抵消重叠。
4. 在 li 元素上设置 float: left 以确保它们浮动
5. 添加样式以自定义菜单外观，例如文本装饰、边距和背景

进一步的考虑因素

此技术保持内容的流动并允许其他元素出现在居中的菜单下方。与 JavaScript 解决方案不同，此方法使用 CSS 属性，确保旧版浏览器之间的兼容性。