如何完美居中水平``菜单及其列表项？

水平居中

菜单

问题：

由无序列表 (

) 组成的水平菜单需要在容器 <div> 内居中。虽然尝试将
居中，但在 <div> 内已成功，各个列表项 (
• ) 在
  内保持左对齐。

  解决方案：

  实现完美居中两个

  都及其列表项，建议使用以下方法：
  1. Float Wrapper： 在
     周围创建一个左浮动包装器并将其位置设置为“相对”，并带有负向左偏移。这会将包装器置于屏幕外的左侧。
  2. 反向嵌套元素： 将内部
     定位到左侧。在包装器内使用“position:relative”和 50% 的正向左偏移。这将
     正好位于包装纸的中心。
     • 浮动列表项目：调整
     • 在
       内向左浮动的元素并保持其在
       内的地位使用“位置：相对。”

  代码示例：

  #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;
  }

  登录后复制

  HTML 示例：

  <div>

  登录后复制

  通过此实现，菜单将完美居中，列表项均匀分布在水平方向上空间。