float: left; を使うリストの中央寄せ
- 1
- 2
- 3
display: inline; を使うリストの中央寄せ
- 1
- 2
- 3
display: inline-block; を使うリストの中央寄せ
- 1
- 2
- 3
display: table-cell; を使うリストの中央寄せ
- 1
- 2
- 3
display: flex; を使うリストの中央寄せ
- 1
- 2
- 3
キーボードのF12キーを押して開発者ツールを起動すると、ページを再読込するまでCSSを一時的に変更することができます。
CSSの数値を変えるとどのように変化するのかを、お試しください。
横並びになったリストを中央寄せにする方法を、float: left;・display: inline・display: inline-block・display: table-cell・display: flex を使う5つのパターンで紹介します。
ブログのページ数やバナーを並べるときなど、いろいろなところで使えます。