Help us understand the problem. What is going on with this article?

[css] listを縦並びのまま中央寄せする方法

More than 3 years have passed since last update.

文章行頭は左揃えのままリストコンテンツを中央寄せにする方法をメモっておく。

色々な記事みて探ったけど、このやり方が一番いいっぽい。
ulにfloatかけてるので親要素で解除するのを忘れずに:ok_hand:

ul {
   float:left;
   position:relative;
   left:50%;
}

li {
   position:relative;
   left:-50%;
}
  • ulにfloatをかけてリストコンテンツの横幅をコンテンツ内要素の幅と一致させる
  • ulにposition: relative;left: 50%;でliコンテンツの起点を親要素の中央に
  • その後にliにposition: relatibeleft: -50%;でliコンテンツ幅の半分を右に寄せること全体が中央寄せになる

この方法ならコンテンツの中身やデバイスサイズに依存せずに中央寄せできるので便利!

追記

  • スマホサイトの場合、left: 50%;で左にずらした分、コンテンツが画面幅をオーバーしてしまう場合がある
  • ::afterclear: both;入れる方法でfloatを解除すると画面が横にうにょうにょ動いちゃう
  • なので親要素にoverflow:hideen;つけて解除する方が良いみたい
makkoruri
デザイナー兼フロントエンドエンジニアのたまご🐣
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away