水平方向のメニューとそのリスト項目を完全に中央に配置する方法は?

水平

の中央揃えメニュー

問題:

順序なしリスト (

) で構成される水平メニューは、コンテナ <div> 内の中央に配置する必要があります。
を中央に配置しようとしますが、 <div> 内で;成功すると、個々のリスト項目 (
• ) は
  内で左揃えのままになります。

  解決策:

  完璧な中央揃えを実現するには

  の両方ともとそのリスト項目については、次のアプローチをお勧めします。
  1. Float Wrapper:
     の周囲に float-left ラッパーを作成します。そして、その位置を負の左オフセットで「相対」に設定します。これにより、ラッパーが画面外の左側に配置されます。
     • 逆ネスト要素: 内側の
       を配置します。ラッパー内で「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>

  ログイン後にコピー

  この実装では、メニューが完全に中央に配置され、リスト項目が水平方向に均等に配置されます。スペース。