Lenovo がパソコン「最大52% OFF」ボーナスセールを開催中(12月12日まで)

【CSS】横並びさせたリスト ul,li を右寄せや中央寄せする方法

About web

メニュー&ナビゲーションなどで横並びにしたリスト(ul, li など) って中央や右側へ寄せしなければならないことがままあります。

たまにしか使わず忘れてしまうんでここにメモしておきます。

今回は「【CSS】横並びさせたリスト ul,li を右寄せや中央寄せする方法」を紹介します。

横並びさせたリストを右寄せ&中央寄せにする方法

単純かつ少ないコードで寄せる方法

これで横並びしたリストが右寄せになります。

以下は実際に使用したサンプルです。

See the Pen OExWRM by AK (@office151a) on CodePen.

中央寄せにしたい場合は、ul の taxt-align 「right」を「center」に変更すれば中央寄せになります。

display:flex で寄せる方法

これで li が横並びになり、リストが中央寄せになります。

justify-content: が横軸の位置調整、aline-itemus: が縦軸の位置調整です。

以下実際にやってみたデモです。

See the Pen MRmyor by AK (@office151a) on CodePen.

justify-content を「center」で中央寄せ、justify-content を「flex-end」にすると右寄せになります。


一応 display:flex の方が新しい手法ですが、古い方を使っては「ダメ、間違っている」というわけでありません。表示速度などには何の影響もありませんし、古い方も公式に認めれている普通に利用できる手法です。

管理しやすい方を使ってください。