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>

結論

提供されたコードは、

を効果的に中央に配置します。 DIV 内のメニューを使用して、リスト項目を使用可能なスペースの中央に移動します。ただし、このアプローチでは、リスト項目自体を
内の中央に配置することには対応していません。要素。そのためには JavaScript が必要になる場合があります。

以上がCSSフロートとラッパーを使用して水平メニューを中央に配置する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。