はじめに

こんにちは。
最近Webサイト制作の学習をしていたのですが、画像(imgタグ)の中央配置がうまくできず、苦戦した話を記事にします。
結論を言うとブロック要素、インライン要素の理解が足りていないことが原因で起きた話になります。

苦戦した話

サンプルコードを使用して当時の話を説明します。
まずはimgタグで画像を表示。

html

<body>
  <img src="./example.jpg" alt="サンプル画像" class="example">
</body>

imgタグにスタイルを適用していない時は左側に配置される。
これを中央揃いにするため、左右の余白(margin)にautoを指定。

css

.example{
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

ここで問題発生。
画像が中央に配置されない！
以前、divタグはこの方法で中央揃いにできたはず…。
とりあえずググった所、display: blockを追加することで、imgタグは中央揃いにできるとのことでやってみる…。

css

.example{
+ display: block;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.........中央揃いになった！
でも何故中央揃いにできたのか分からない。
さらに調べると原因が判明した！
それは…
インライン要素にmargin:autoは効かない

正直に言うとこれは認識していなかった。
imgタグはインライン要素であり、margin:autoが効かない訳だ。
後に分かったことだが、インライン、ブロック、インラインブロックの3要素には、marginが指定できる要素とできない要素がある。
ブロック要素にはmargin:autoが効くため、display:　blockでブロック要素に変更したことで、中央揃えができたことに納得した。

参考
インラインブロック要素について

まとめ

今回の事象は、初心者が躓く事例としても多く挙げられています。
「私も躓いた経験がある！」という方は、これを機会に理解を深めていただけると、今後躓くことなくスムーズにコーディングできるようになるはずです。是非学んでもみてください。
長々とありがとうございました。