<li></li>を縦並びのまま中央寄せにする方法

FRONTEND

2019.05.4

<li></li>を縦並びのまま中央寄せにする方法

<li>を横並びにして中央寄せにする方法は良く紹介されていますが、縦並びのまま中央寄せにする方法となるとどうでしょう。

使う場面は中々少ないかも知れませんが、覚えておいて損は無い方法かと思います。普段メモ代わりにしているドキュメントに残っていたのですが、僕自身どんな場面で調べたのか全く覚えていません。ただ久しぶりに見返してみると意外と「なるほど」と思うCSSだったので備忘録代わりに紹介します。

方法その1 display:flexをつかう方法

<ul><li></li></ul>を<div>で囲って、display:flex、justify-content:centerで中央寄せにする方法です。<div>で囲む必要がある分、タグが一つ増えてしまうのがネックです。

See the Pen
mYbjwd
by keitasakurai (@mdesignyokohama)
on CodePen.


方法その2 floatとpositionを使う方法

これがメモ代わりのドキュメントに残っていた方法です。<ul>にfloatをかけているので、clearfixが必要になってきます。ただ、中央寄せにするためだけのタグが必要ないので、HTMLも見やすくなるはず。

See the Pen
RmbBZb
by keitasakurai (@mdesignyokohama)
on CodePen.

解説

<ul>にfloatをかけることで、横幅をコンテンツの幅と同じにしています。さらに、<ul>にposition: relative;とleft: 50%;を指定して、<li>の起点を親要素の中央に合わせます。<その後、<li>にposition: relativeとleft: -50%;をかけることで、全体が中央に寄ることになります。