【CSS】横並びさせたリストやナビゲーションを右寄せ・中央寄せさせる

About CSS

ul, li タグを使って横並びにしたナビゲーションやメニュー。特に何もしなければ左寄りに配置されます。

しかし、ナビゲーションメニューなどは、中央や右寄せにしたいことって往々にしてあり、その都度「どうやるんだっけ?」と探してしまうことがあります。

今回は「横並びさせたリストやナビゲーションを右寄せ・中央寄せさせる方法」をメモしておきます。

横並びさせたナビゲーションを中央や右寄せにする

パターン ①

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

以下が実際に利用したデモです。

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

中央寄せにする場合は、ul の text-align の right を center に変更するだけでOK。

パターン ②

display: flex を使った新しい手法。

justify-content が横軸の位置調整。align-items が縦軸の位置調整です。

justify-content: flex-end; なら右寄せ、justify-content: center; なら中央寄せ。

以下デモです。

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


ぼくが十数年前にはじめて HTML と CSS の知識を得るために購入した参考本は「アンク社のスタイルシート辞典と HTML 辞典」。タグの名前や効果を逆引きで調べられるのでボロボロになるまで使いました。

今は HTML と CSS が一緒になって出版されています。1冊あると便利だと思いますよ。

created by Rinker
¥2,200 (2019/10/14 19:54:43時点 Amazon調べ-詳細)