0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

CSS ”text-align:center” と”margin:0 auto”のユースケース

Last updated at Posted at 2022-02-14

-”text-align:center”はブロック要素に記述されている内容(インライン)に効く。
-”margin: 0 auto”はブロック要素にダイレクトに効く。しかしwidthが100%の状態だと効かない。(実際には効いているが幅が広すぎて身動きできないような状態で中央に動かない。)

考察:
ユースケース1:ブロックの幅は100%のままで良く、記述されている内容を中央に寄せたいのであればtext-align: centerで十分。
ユースケース2:ブロックの幅を小さくする必要があり、且つそのブロック要素を中央に寄せたい場合はmargin: 0 autoを使う必要があり。(さらにブロック内に記述される内容も中央寄せしたい場合はtext align: centerも併用。)

ユースケース1
p {
    text-align: center
}
ユースケース2
p{
    text-align: center/left/right;
    max-width: 30%;
    margin: 0 auto
}
0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?