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; /*ブロック要素に指定する*/ }