如何完美居中水平``菜單及其清單項目？

水平居中

選單

問題：

由無序列表() 組成的水平選單需要在容器

<div> 內居中。雖然嘗試將

居中，但在 <div> 內已成功，各個清單項目 (
• ) 在
  內保持左對齊。

  解決方案：

  實現完美居中兩個

  都及其列表項，建議使用以下方法：
  1. Float Wrapper： 在
     周圍創建一個左浮動包裝器並將其位置設為“相對”，並帶有負向左偏移。這會將包裝器置於螢幕外的左側。
  2. 反向巢狀元素： 將內部
     定位到左邊。在包裝器內使用「position:relative」和 50% 的正向左偏移。這將
     正好位於包裝紙的中心。
  3. 浮動清單項目：調整
  4. 在
     內向左浮動的元素並保持其在
     內的地位使用「位置：相對。」

  程式碼範例：

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

  透過此實現，選單將完美居中，列表項目均勻分佈在水平方向上空間。