ナビゲーション メニューの水平方向の中央揃えを実現する CSS の 5 つの方法の詳細な例

Web デザインでは、水平方向のナビゲーション メニューが広く使用されています。CSS スタイルでは、通常、Float 要素または "display:inline-block" を使用してそれを解決します。今日は主に、幅が不明な要素を中央に配置する方法を説明します。水平方向の中央揃えの問題を解決するためのいくつかの方法を以下に示します。もちろん、これらの方法は必ずしもナビゲーション メニューの問題を解決するために使用されるわけではなく、他の同様の状況でも使用できます。

CSSナビゲーションメニューを水平方向に中央揃えするための複数のメソッド:

• メソッド1:display:inline-block

• メソッド2:position:relative

• メソッド3:display:table

• メソッド4： display:inline-flex

• 方法 5: width:fit-content / width:intrinsic

方法 1: display:inline-block

この方法は比較的単純で、コンテナを「display」に変換することです。 :inline -block" インライン ブロック レベル要素を使用すると、"text-align:center" を直接使用して水平方向の中央揃えを実現できます。

HTML コード:

ここでは、このナビゲーション メニューを囲む p が必要です。

<p class="navbar">
    <ul>
        <li><a href="/">首页</a></li>
        …
    </ul>
</p>

CSS コード:

「text-align:center」を外側の p に追加し、メニュー コンテナを「display:inline-block」インライン ブロック レベル要素に設定すると、メニューが「float:left」で左に

.navbar {
    text-align:center;
}
.navbar ul {
    display:inline-block;
}
.navbar li {
    float:left;
}
.navbar li + li {
    margin-left:20px;
}

ここのブラウザはIE8以降のみ対応しているので、IE7に対応させたい場合は以下のコードを追加してください

.navbar ul {
    display:inline;
    zoom:1;
}

方法2:position:relative

これは要素を水平方向に中央に配置するには、「position:relative」配置メソッドを使用します。コードには追加の p が含まれるため、この方法はあまりお勧めしません。もちろん、これらは状況に応じて使用されます。

HTML コード:

<p class="navbar">
    <p>
        <ul>
            <li><a href="/">首页</a></li>
            …
        </ul>
    </p>
</p>

CSS コード:
位置決め p を float に設定し、「left:50%」に位置決めしてから、「left:-50%」に移動します。この方法は非常に興味深いです。表現があまり明確ではないかもしれません。自分でコードを読んでください^^

.navbar {
    overflow:hidden;
}
.navbar > p {
    position:relative;
    left:50%;
    float:left;
}
.navbar ul {
    position:relative;
    left:-50%;
    float:left;
}
.navbar li {
    float:left;
}
.navbar li + li {
    margin-left:20px;
}

IE7 と互換性を持たせたい場合は、次のスタイルを追加してください:

.navbar {
    position:relative;
}

方法 3: display:table

簡潔なコードが好きなら、この方法はあなたに非常に適しています。

HTML コード:

<ul class="navbar">
    <li><a href="/">Home</a></li>
    …
</ul>

CSS コード:

.navbar {
    display:table;
    margin:0 auto;
}
.navbar li {
    display:table-cell;
}
.navbar li + li {
    padding-left:20px;
}

ブラウザ互換性: このメソッドには合理化されたコードがありますが、IE7 以下はサポートされていません...

メソッド 4: 表示: inline-flex

フレックス レイアウトに関する知識を自分で確認してください>_

HTML コード:

<p class="navbar">
    <ul>
        <li><a href="/">Home</a></li>
        …
    </ul>
</p>

CSS コード:

.navbar {
    text-align:center;
}
.navbar > ul {
    display:-webkit-inline-box;
    display:-moz-inline-box;
    display:-ms-inline-flexbox;
    display:-webkit-inline-flex;
    display:inline-flex;
}
.navbar li + li {
    margin-left:20px;
}

ブラウザの互換性: IE7 以下の IE ブラウザはサポートしていません。

方法 5: width:fit-content

HTML コード:

<p class="navbar">
    <ul>
        <li><a href="/">首页</a></li>
        …
    </ul>
</p>

CSS コード:

.navbar {
    text-align:center;
}
.navbar > ul {
    display:-webkit-inline-box;
    display:-moz-inline-box;
    display:-ms-inline-flexbox;
    display:-webkit-inline-flex;
    display:inline-flex;
}
.navbar li + li {
    margin-left:20px;
}

ブラウザの互換性: この互換性は比較的低く、Firefox または chrome、Opera 12 およびその他の新しいバージョンのみをサポートします。ブラウザのもの。

最後に書いています: 方法 1: display:inline-block はシンプルで理解しやすいです。

以上がナビゲーション メニューの水平方向の中央揃えを実現する CSS の 5 つの方法の詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。