如何使用 CSS 浮動和包裝器將水平``菜單居中？

水平居中

選單

面臨的挑戰

在嘗試使用內聯塊、塊和中心對齊的組合來居中對齊水平選單時，所需的結果仍然難以實現。

建議的解決方案Web

資源（http://pmob.co.uk/pob/centred-float.htm）提出了一種方法，該方法方法涉及向左浮動並向左移離螢幕的包裝元素，並伴隨內部元素浮動正確。

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

<div>
<p><strong>結論</strong></p>
<p>提供的程式碼有效地集中了 </p>
<ul> DIV 中的選單，將清單項目移至可用空間的中心。然而，該方法並未解決將列表項本身在<ul>內居中的問題。元素。為此，可能需要 JavaScript。 </ul>
</ul>
</div>

以上是如何使用 CSS 浮動和包裝器將水平``菜單居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！