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

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

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

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

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

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

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

img要素をブロック化してスタイルを適用する方法

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

HTML

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

CSS

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

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

divタグで囲んでスタイルを適用する方法

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

HTML

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

CSS

.ariariari {
text-align: center;
}
このエントリーをはてなブックマークに追加

コメントを残す

頂いたコメントは一読した後表示させて頂いております。
反映まで数日かかる場合もございますがご了承下さい。