LoginSignup
4
4

More than 5 years have passed since last update.

@masarufuruya(Masaru Furuya)inエンジニアと人生コミュニティ

横並びのリストを中央寄せにするメモ

Posted at

定番の方法

  • display:inline-blockを使う
  • display:inline-blockを使うとテキスト扱いになるので、親要素にtext-align:centerにすると、真ん中寄せになる
  • このままだとリストの間に余計な余白が入るが、ulタグのフォントサイズを0にしてliタグにフォントサイズを指定すると、余計な余白が消える
  • display:table-cellを使った方法もあるらしい

今後の方法

  • 今後はdisplay:flexを使った方法が主流になっていくので、覚えておく

参考記事

4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
4