リスト要素を横並びさせてリスト全体を中央揃えさせる方法まとめ
バナーやナビゲーションで結構使用する機会の多い
「横並びかつ中央揃え」のレイアウト。
よく使用する方法2パターンと
CSS3のFlexboxを使用した方法を（今更ながら）まとめました。
下記のHTMLを使用していきます。
|
1 2 3 4 5 6 7 8 |
<div class="list"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> |
「position:relative;」を使う
floatで横並びにするならこちらを使用します。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.list { position: relative; overflow: hidden; /* ulでリスト全体を右に50%移動している分幅が広がりスクロールバーが表示されるのを防ぐ */ } .list ul { position: relative; left: 50%; /* ulを右に50%移動 */ float: left; margin-left: -5px;/* liのmarginの半分をネガティブマージン（しないと右にずれる） */ } .list ul li { position: relative; left: -50%; /* 左に50%移動 */ float: left; margin-left: 10px; } |
DEMO
- 1
- 2
- 3
- 4
「display:inline-block;」を使う
私としてはこれが一番わかりやすく、使用頻度も高いです。
inline-blockでliを横並びにするとタグを改行した時に空白ができます。
タグを改行しなければよろしいですがhtmlが見づらいので下記のように
- ulタグのフォントサイズを0に
- liタグで元のフォントサイズを指定する
もしくは
- ulタグに「letter-spacing: -.4em;」を指定する
- liタグに「letter-spacing: normal;」を指定するして元に戻す
することで改行しても空白ができないようになります。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 |
.list ul { text-align: center; margin-left: -10px; font-size: 0; /* タグ改行時の空白防止 */ } .list ul li{ display: inline-block; margin-left: 10px; font-size: 14px; /* ulでサイズ0にしたのを戻す */ } |
|
1 2 3 4 5 6 7 8 9 10 11 |
.list ul { text-align: center; margin-left: -10px; letter-spacing: -.4em; /* タグ改行時の空白防止 */ } .list ul li{ display: inline-block; margin-left: 10px; letter-spacing: normal; /* 元に戻す */ } |
DEMO
- 1
- 2
- 3
- 4
CSS3 Flexboxを使う
Flexboxは、要素の横並びや縦並び、高さを揃える、
上下左右の中央寄せなどが簡単に実装でき
レスポンシブにも対応しやすいです。
ですがIEでバグが出る（もうIEはいい）、
プロパティが多くて覚えにくい（覚えなさい）
など個人的にはとっつきにくいです。。。
とりあえず中央揃えくらいは覚えておこうかと思います（笑）。
|
1 2 3 4 5 6 7 8 9 10 |
.list3 ul { display: flex; /* 親要素に指定することで、Flexboxが適用される */ flex-direction: row; /* 左から右に横並び（デフォルト値なのでなくても可） */ justify-content: center; /* 中央揃え */ margin-left: -10px; } .list3 ul li { margin-left: 10px; } |
DEMO
- 1
- 2
- 3
- 4
▼参考にさせていただきました。ありがとうございました。
この記事の投稿者
