CSSで画像を中央寄せにする

備忘録として色々メモすることにします!

CSSで画像を中央寄せにするのにmargin: ● auto;を使ってもうまくいかなかった時の原因について。

原因1:widthを指定していない

指定しないと反映されません。

原因2:ブロック要素になっていない

imgタグはインライン要素です。imgタグをブロック要素に指定することで中央寄せになります。

(※インライン要素のため「text-align」でも中央寄せなど有効になる場合もあるようなのですが、imgはテキストではないので、text-alignで変更するのは好ましくない。)

ソースコード

HTML

<div class="container">
   <img src="top.png">
</div>

CSS

.container img {
  max-width: 100%;   /*必ず幅を設定する*/
  margin: 0 auto;   /*左右うのマージンをautoにする ※上下のマージンは0じゃなくても良い*/
  display: block;   /*ブロック要素に指定する*/
}

とても参考になりました!ありがとうございました。

rikiy.jp