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

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

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

今回の記事内容

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

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

ul {
  text-align: right;
}

li {
  display: inline;
}

ul {

text-align: right;

}

li {

display: inline;

}

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

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

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

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

ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
}

ul {

display: flex;

justify-content: center;

align-items: center;

list-style: none;

}

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

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

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

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

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

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

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

こちらもいかがですか？