[CSS]レスポンシブ対応、ナビゲーションを水平の真ん中に配置するテクニックのまとめ

サイト構築 -CSS

Post on:2013年3月8日

デモ

デモは上から display:inline-block, position:relative, display:table, display:inline-flexで、ナビゲーションを水平の真ん中に配置しています。

デモページ：幅1200pxで表示

表示サイズを変更しても、真ん中配置です。

デモページ：幅780pxで表示

実装: display:inline-block

ラッパーに「text-align:center」を指定できるのであれば、「display:inline-block」を使用することができます。

HTML

ナビゲーションのリスト要素を内包するdivを一つ用意します。

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

CSS

ラッパーに「text-align:center」、アイテムはfloatで横並びにし、inline-bklockでまとめます。

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

サポートブラウザ

IEはこのままではhasLayoutで動かないため、inline-blockをinlineに変更しzoom:1を加えるとIE7/8でも動作します。

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

実装: position:relative

もう一つよく使用されるテクニックが「position:relative」です。
ラッパーに「text-align:center」を指定できないのであれば、このテクニックでしょう。

HTML

このテクニックでは、ラッパーを2つ必要とします。

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

CSS

スタイルシートは少しトリッキーで、内側のラッパーをfloatし「left:50%」に配置し、リストを「left:-50%」で最初のポジションに戻します。

.navbar {
    overflow:hidden;
}
.navbar > div {
    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;
}

実装: display:table

もし最小限のマークアップで実装するなら、このテクニックです。

HTML

HTMLはかなりシンプルで、無駄なものは一切ありません。

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

CSS

「display:table」を使用することで、内容に合わせて自動的に幅を調整し、margin:autoで真ん中に配置します。

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

サポートブラウザ

「display:table」を使用しているため、IE7以下は機能しません。

実装: display:inline-flex

最後のテクニックは、flex layoutです。

HTML

これは「display:inline-block」と非常に似ており、HTMLは全く同じです。

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

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;
}