🐡

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

2021/09/21に公開

インライン要素の時

対策１：「text-align:center;」でテキストだけ中央に寄せる
対策２：幅を指定して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;
}

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