CSSのみを使用して水平メニューを中央揃えにする方法は?

水平メニューを中央揃えにする方法

さまざまなテクニックを試したにもかかわらず、水平メニューを中央揃えにするのが困難に遭遇しました。このガイドでは、この問題を詳しく掘り下げ、実証済みの解決策を提供します。

HTML および CSS コード

<div class="topmenu-design">
    <ul></ul>
<pre class="brush:php;toolbar:false">#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;
}

#buttons a:hover {
    border: 2px inset blue;
    color: red;
    background: #f2f2f2;
}

#content {
    overflow: hidden; /* hide horizontal scrollbar*/
}

解決策: Float と相対配置の利用

推奨解決策には、float と相対位置の使用が含まれます。この手法では、メニューを画面外の左側に配置する float ラッパーでラップする必要があります。その後、ネストされたリスト項目が反対方向に配置され、ラッパー内で効果的に水平方向の中央に配置されます。

実装

1. float: right プロパティを親 div に追加して位置を揃えます。
2. ラッパー上で位置: 相対および左: -50% を設定してシフトします。 50% 左に移動し、その下のコンテンツと重なり合います。
3. 位置: 相対と left: 50% を ul に適用して重なりに対抗します。
4. float: left を ul に設定します。 li 要素を追加して、ul 内で左にフローティングするようにします。
5. テキストの装飾、余白、背景など、メニューの外観をカスタマイズするスタイルを追加します。 color.

さらなる考慮事項

この手法により、コンテンツの流れが維持され、中央のメニューの下に他の要素が表示されるようになります。 JavaScript ソリューションとは異なり、このアプローチでは CSS プロパティを使用し、古いブラウザー間での互換性を確保します。