【CSS】横並びにさせたリスト「ul、li」を、右寄せや中央寄せに設定する方法

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

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

ホームページを制作している方にも役に立つと幸いです。

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

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

単純かつ少ないコードで寄せる方法とdisplay:flex で寄せる方法を記載します。

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

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

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

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

display:flex で寄せる方法

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

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

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

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

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

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