🐡

[CSS] 中央寄せが効かないとき

2021/09/21に公開約500字

インライン要素の時

対策1:「text-align:center;」でテキストだけ中央に寄せる
対策2:幅を指定してmargin:0 auto;を指定

画像が中央に寄らない

画像はimg要素になりますのでインライン要素
以下だけだと文字だけが動くことになる

img{
  text-align:center;
  margin:0 auto;
}

もし、text-align:center;を効かせるのでしたら、親のブロック要素がセレクタでなければならない

上の例のように親要素に対して、text-align:center;を指定してしまうと、同じ階層のテキストなどもすべて中央に寄ってしまう

imgタグには「auto」は効きません。これを有効にするためにはdisplay:block;を追加

img{
  margin:0 auto;
  display:block;
}

margin:0 auto;もtext-align:center;も効かない

inline-blockには、margin: 0 auto;は効かないので、親のブロック要素にtext-align: center;で指定する

https://cotodama.co/css-center/#margin0_auto

Discussion

ログインするとコメントできます