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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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