はじめに

フロントエンドのコードを書いていて、画像を中央寄せにすることに苦戦したので忘備録と共有を兼ねて記事にしました。何番煎じかわかりませんが、誰かの助けになったら幸いです。

この記事の目標

以下のhtmlのstyleを書いて、画像を中央寄せにしたいです。
動作確認はGoogle Chromeでしました。
※この記事では、縦方向の中央ぞろえはやらないです。

<head>
  <style>
    /*ここを書いていく*/

  </style>
</head>

<body>
  <div>
    <img src="./image.png" alt="画像">
  </div>
</body>

この状態では次のように画像は左端に表示されますが、

styleをかいて、次のような中央寄せを目指します。

完成したコード

以下のようなstyleを適用することで、画像を中央寄せにでました。

<head>
  <style>
    div {
      text-align: center;
    }
  </style>
</head>

<body>
  <div>
    <img src="./image.png" alt="画像">
  </div>
</body>

以下のようなコードでも中央寄せにできます。

<head>
  <style>
    img {
      margin: auto;
      display: block;
    }
  </style>
</head>

<body>
  <div>
    <img src="./image.png" alt="画像">
  </div>
</body>

以上だけでも記事としては完結しますが、以下から私が苦戦した部分について共有したいと思います。

私の失敗とその理由

最初、私は以下のようにstyleを適用してみましたが画像はみじんも動きませんでした。
（style以外は省略しますが、最初の状態と同じです）

/*これではうまくいかない*/
<style>
  img {
    text-align: center;
  }
</style>

/*これもうまくいかない*/
<style>
  img {
    margin: auto;
  }
</style>

この方法が失敗した理由は、各スタイルが何をしようとしているか考えることでわかりました。
各スタイルが何をするか、私なりの言葉で説明すると次のようになります。

text-align:center は、ブロックレベル要素に適用することで、要素の中身を中央寄せにする。
margin:autoは、ブロックレベル要素にwidthと一緒に適用することで、要素そのものを中央寄せにする。

どちらも共通点として、ブロックレベル要素にしか適用できないということがあります。しかし、imgタグによって作られた要素はインライン要素です。
つまり私が失敗した理由は、ブロックレベル要素にしか適用できないスタイルをインライン要素に適用しようとした（＝ブロックレベル要素とインライン要素の区別をつけていなかった）ことにあります。（ブロックレベル要素とは何か、インライン要素とは何か、そもそも要素とは何かについては説明できるほど理解が及んでないです。）

以上を踏まえ、中央寄せにするには

divなどのタグでimgを囲み、それに対してtext-align:centerを適用する
imgにdisplay:blockをつけて、ブロック要素として扱いそれにmargin:autoをつける。(widthは画像の幅と同じになるので、明示的に指定しなくても動く)

といったことをすればよいことになります。
(１つめの方法はdivの中にimg以外の文字を入れてしまうと意図した表示がされないと思うので注意してください。imgのみを含むdivを作り、それにidかclassをつけてstyleを適用するのがいいかなと思います。)

おわりに

cssで画像の中央寄せにはいつも苦戦していたのですが、ある程度自分で理解できたのでアウトプットしてみました。「中央寄せ出来たぜ」という記事か、「ブロックレベル要素とインライン要素の区別大切だぜ」という記事にしようか迷走しながら書いたので、だいぶ歯切れが悪い感じになってしまったかなと思ってます。
また、日本語として適切かどうか怪しい部分や、一部説明をごまかしたりしている部分があるのが申し訳ないです。