CSSで画像を中央揃えにする２つの方法

画像を中央揃えにしようと、img要素「text-align: center;」や「margin: auto;」を適用して「あれぇ～？効かねぇぞぉ？」ってなったことのある方は少なくないのではないでしょうか。この記事では解決法と、そもそも何故前述の方法では中央揃えにできないのかを解説します。

なぜ中央揃えにできないのか

原因はimg要素がブロックレベル要素ではなくインライン要素であることです。

text-alignはインライン要素を込むブロックレベル要素に指定しなければならないので、インライン要素であるimg要素に直接指定しても効いてくれません。

また、marginもブロック要素を寄せるためのものですので、ブロックレベル要素に対して指定しなければいけません。そのためこちらもインライン要素であるimg要素に直接指定しても中央揃えになってくれないのです。

1つの方法として、img要素にCSSの「display: block」を適用するものがあります。本来インライン要素であるimg要素をブロックレベル要素のように扱うことができるようになるため、marginプロパティが使用できるようになります。

<img src="https://denno-sekai.com/wp-content/uploads/2014/07/rockefeller-center-370561_1920_mini.jpg" class="ariariari" />

.ariariari {
display: block;
margin-left: auto;
margin-right: auto;
}

※「display: block;」はmarginよりも前に記述して下さい。

もう一つの方法はimg要素をdivタグで囲んでしまうというものです。前述のとおり、text-alignはインライン要素を込むブロックレベル要素に指定するものですので、こうすることで問題なく適用することができます。

<div class="ariariari"><img src="https://denno-sekai.com/wp-content/uploads/2014/07/rockefeller-center-370561_1920_mini.jpg" /></div>

.ariariari {
text-align: center;
}