<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%;をかけることで、全体が中央に寄ることになります。
