JavaScriptを使わずに水平方向の「メニュー」を中央に配置する方法は?

水平方向の中央揃えの方法

JavaScript を使用しないメニュー

水平メニューは、Web サイト上でナビゲーションやカテゴリのリンクを表示するためによく使用されます。これらのメニューを中央揃えにすると、視覚的な魅力が高まり、ユーザー エクスペリエンスが向上します。ただし、完璧な位置合わせを達成するのは難しい場合があります。よくある問題の 1 つは、メニュー全体が中央に配置されているにもかかわらず、その中の個々のリスト項目が左揃えのままであることです。

解決策の実装

この問題を克服するには、次のテクニック:

1. をラップします。
   内のメニューコンテナはフローティング ラッパーとして機能します。

   ラッパー要素に float: left を適用して、親要素の左側に揃えます。

   ラッパーの width プロパティを次のように設定して、ラッパーの幅をなくします。 auto.

   position:relative と left:-50% を使用してラッパーを左にシフトし、効果的に中央に配置します。

   位置を適用: 相対および左:

   の 50%

   メニュー項目が

   内で浮動するようにするには、
   • に float: left を設定します。 elements.

   結果

   これらの手順を実装すると、水平メニューが水平方向に中央揃えになり、リスト項目がメニュー内で整列します。この技術は JavaScript を必要とせずにセンタリングを実現し、さまざまなデバイスや画面サイズに対応したクロスブラウザー ソリューションを提供します。

以上がJavaScriptを使わずに水平方向の「メニュー」を中央に配置する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。