WEBページレイアウト 中央寄せのやり方

リストの横並びと左右中央揃え

左右中央に揃える際に重要なのが
揃えたい要素が「インライン要素」か「ブロック要素」かです。

li 要素はブロック要素のため、横並びにするにはいくつか方法があります。
float を設定する方法と、 display でインライン要素に変更する方法です。

今回は横並びにする方法と併せて、中央揃えに設定する方法も記載します。

<div class="list">
    <ul>
        <li><a href="#">ナビ1</a></li>
        <li><a href="#">ナビ2</a></li>
        <li><a href="#">ナビ3</a></li>
    </ul>
</div>

floatで横並びにするケース

.list {
    overflow: hidden;
    position: relative;
}

.list ul {
    float: left;
    left: 50%;
    margin: 0; /* 余分なマージンを消す */
    padding: 0;/* 余分なパディングを消す */
    position: relative;
}

.list ul li {
    background-color: #f00;
    float: left;
    left: -50%;
    margin: 0 10px;    /* 隙間を入れたい場合に設定 */
    position: relative;
    text-align: center;/* インラインの左右の中央揃え */
    width: 100px;      /* 任意の幅 */
}

.list ul li a {
    display: block;/* 文字以外にも幅全体にリンクを付けたい時はブロック要素にする */
}

.list {
    overflow: hidden;
    position: relative;

    ul {
        float: left;
        left: 50%;
        margin: 0; /* 余分なマージンを消す */
        padding: 0;/* 余分なパディングを消す */
        position: relative;

        li {
            background-color: #f00;
            float: left;
            left: -50%;
            margin: 0 10px;    /* 隙間を入れたい場合に設定 */
            position: relative;
            text-align: center;/* インラインの左右の中央揃え */
            width: 100px;      /* 任意の幅 */

            a {
                display: block;/* 文字以外にも幅全体にリンクを付けたい時はブロック要素にする */
            }
        }
    }
}

1. .listのrelativeで相対位置を決定します。
2. 下位要素のulのrelativeで、.listの左(left)位置から50%右に移動させます。
3. さらに下位要素のliのrelativeで、ulの左(left)位置から-50%右に移動させます。
   ※-50%右は単に左に50%分移動すると考えればOK

.list ul {
    width: 1000px;/* リスト全体の幅 */
    margin: auto; /* 中央揃え */
    padding: 0;   /* 余分なパディングを消す */
}

.list ul li {
    float: left;
    margin: 10px; /* 隙間が必要な場合はmarginを設定 */
    padding: 10px;/* liの大きさを変えたい場合はpaddingを設定（高さも持たせられる） */
    width: 293px; /* liが3つで想定 */
}

.list ul li a {
    display: block;/* 文字以外にも幅全体にリンクを付けたい時はブロック要素にする */
}

.list ul {
    width: 1000px;/* リスト全体の幅 */
    margin: auto; /* 中央揃え */
    padding: 0;   /* 余分なパディングを消す */

    li {
        float: left;
        margin: 10px; /* 隙間が必要な場合はmarginを設定 */
        padding: 10px;/* liの大きさを変えたい場合はpaddingを設定（高さも持たせられる） */
        width: 293px; /* liが3つで想定 */

        a {
            display: block;/* 文字以外にも幅全体にリンクを付けたい時はブロック要素にする */
        }
    }
}

※ポイント※

1. ulでwidth（幅）を指定する
2. liの幅がulで設定した幅を超えてしまうとカラム落ちします。
   width以外にも、「margin」「padding」「border」の数値も含みます。
3. 逆にulで設定した幅に満たない場合は、中央に揃いません。

float以外のケース

.list ul {
    margin: 0; /* 余分なマージンを消す */
    padding: 0;/* 余分なパディングを消す */
    text-align: center;
}

.list ul li {
    display: inline-block;
    margin: 10px;   /* 隙間が必要な場合はmarginを設定 */
    padding: 10px 0;/* liの高さを変えたい場合はこのpaddingを設定 */
}

.list ul li a{
    display:block;
    padding:0 10px;/* ここで幅全体にリンクをつける事が出来る */
}

.list ul {
    margin: 0; /* 余分なマージンを消す */
    padding: 0;/* 余分なパディングを消す */
    text-align: center;

    li {
        display: inline-block;
        margin: 10px;   /* 隙間が必要な場合はmarginを設定 */
        padding: 10px 0;/* liの高さを変えたい場合はこのpaddingを設定 */

        a{
            display:block;
            padding:0 10px;/* ここで幅全体にリンクをつける事が出来る */
        }
    }
}

※ポイント※

1. ul要素のtext-aline:centerで、内部のインライン要素を中央に揃える
2. li要素がブロック要素のため文字列しか中央に揃わないので、
   li要素をdisplay:inline-blockにしてインライン要素に変える
3. li要素で幅を変更してしまうと、a要素がブロック要素でも反応しないため、
   幅全体をリンクしたいときはa要素で幅を変更すること。
   逆にa要素で高さも変更してしまうと、高さにもリンクが付いてしまうため注意が必要

inline-blockはfloatを使用しなくても、横並びの中央寄せが出来るので便利です。
ただしリストに隙間が出来るので、隙間を気にするのであれば別途対応が必要です。

• liタグを改行しないで並列で書く
• コメントアウトして書く（なんか気持ち悪い…）
• liの閉じタグをつけない（html5のみらしい）
• ulタグにletter-spacing:-.40em;をつけて、liタグにletter-spacing:nomal;で隙間を埋める（liタグのところがいまいちよく分かってない・・・）

.list ul {
    display: table;
    margin: 0 auto;/* ulの中央揃え */
    padding: 0;    /* 余分なパディングを消す */
}

.list ul li {
    border-right: 10px solid #fff;/* 隙間を入れたい時の力技 */
    display: table-cell;
    width: 200px;                 /* 任意の幅 */
    height:100px;                 /* 任意の高さ */
    text-align: center;           /* 左右の中央揃え */
    vertical-align: middle;       /* 上下の中央揃え */
}.

list ul li:last-child {
    border-right: 0;/* 隙間を入れた時に一番最後のリストのボーダーを消す */
}

.list ul li a {
    display: block;/* 文字以外にも幅全体にリンクを付けたい時はブロック要素にする */
}

.list ul {
    display: table;
    margin: 0 auto;/* ulの中央揃え */
    padding: 0;    /* 余分なパディングを消す */
    
    li {
        border-right: 10px solid #fff;/* 隙間を入れたい時の力技 */
        display: table-cell;
        width: 200px;                 /* 任意の幅 */
        height:100px;                 /* 任意の高さ */
        text-align: center;           /* 左右の中央揃え */
        vertical-align: middle;       /* 上下の中央揃え */

        &:last-child {
            border-right: 0;/* 隙間を入れた時に一番最後のリストのボーダーを消す */
        }
        a {
            display: block;/* 文字以外にも幅全体にリンクを付けたい時はブロック要素にする */
        }
    }
}

※ポイント※
table => table要素のような表示になる
table-cell => td要素のような表示になる
table-cellにmarginは効きません。(paddingは効く)

1. ul要素をdisplay:tableとmargin:0 autoを使って中央に揃える
2. li要素にdisplay:table-cellとvertical-align:middleを使って上下中央に揃える