横並びのリストを中央寄せ(センタリング)する方法!

箇条書きなど横並びのリストを中央寄せ(センタリング)する方法を解説します。float・flexbox・inline-blockなど横並びの方法ごとに中央寄せの方法をサンプルコード付きで紹介します!

コンテンツ [表示]

  1. 1横並びのリストを中央寄せ(センタリング)したい
  2. 2横並びのリストを中央寄せ(センタリング)する方法
  3. 2.1floatで横並びさせている場合
  4. 2.2display:flexで横並びさせている場合
  5. 2.3display:inlineで横並びさせている場合
  6. 2.4display:inline-blockで横並びさせている場合
  7. 2.5display:table-cellで横並びさせている場合
  8. 3まとめ

横並びのリストを中央寄せ(センタリング)したい

横並びさせたリストを中央によせたいケースは現場ではよくあります。

一方で横並びの方法は「floatを使った方法」「inlineinline-blockを使った方法」「flexboxを使った方法」などいくつかあり、それぞれで中央寄せの方法は異なります。

この記事では横並びの方法毎に中央寄せ(センタリング)させる方法について解説していきます。

Photo byjamesmarkosborne

横並びのリストを中央寄せ(センタリング)する方法

それではそれぞれのリストの横並びの方法ごとに中央寄せの方法を解説していきます。

floatで横並びさせている場合

floatで横並びさせている場合で、下記のようにCSSを指定していくと中央寄せすることが出来ます。

.listleft: 50%を設定し、左側の開始位置を半分の位置からスタートさせます。更にその中の.itemでは逆にleft: -50%とします。

この処理でfloatした要素が真ん中に来ます。

あわせて読みたい
float
CSSのfloatプロパティは指定した要素をブロック内の左右のどちらに寄せるかを制御するプロパティです。floatプロパティの構文や使い方をサンプルコード付きで解説します。

display:flexで横並びさせている場合

フレックスボックスを使って横並びさせている場合ですが、中央寄せは下記の方法となります。

フレックスボックスの横方向の中央寄せはjustify-content: centerを指定すれば実現出来ます。

display:inlineで横並びさせている場合

アイテムをdisplay:inlineとして横並びさせているときに中央寄せする方法は下記となります。

display:inlineとしているアイテムの親要素(.list)でtext-align: centerを指定するだけです。

ただしインラインを指定しているので、CSSでpaddingmarginなどの余白調整がやりにくいなどデメリットも存在します。

display:inline-blockで横並びさせている場合

display: inline-blockで横並びさせている場合は、display: inlineと同じ方法で中央寄せが可能です。

インラインブロックの場合は、paddingmarginでの余白調整が可能なため、インラインの場合のデメリット面を克服しています。

display:table-cellで横並びさせている場合

display: table-cellで横並びさせている場合の中央寄せの方法は下記となります。

ブロック要素と同じくmargin: 0 autoと、左右のmarginautoを指定することで中央寄せとなります。

まとめ

いかがでしたでしょうか。リストの横並びを中央寄せする方法をサンプルコードとプレビュー付きで紹介してきました。

横並びの方法は多用にあり、それぞれの方法で中央寄せの方法も異なります。しっかり把握してきましょう。

また今回の方法はほとんどがwidthを固定せずに実装している例となりますので、レスポンシブにも対応しているかと思います。

ぜひ一番やりやすいやり方を採用してみて下さい!

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次