【CSS入門】画像を中央揃えにする2つの簡単な方法

今日は「ススワタリ」を中央に配置してみましょう。この小さな生き物たちは、通称「すすおばけ」と呼ばれ、よく動き回るため、写真を撮るにはじっとさせて中央に配置しておく必要があります。それでは、さっそくやってみましょう！

※本記事を読み進める際は、ブログのリポジトリも併せてご参照ください。

HTMLに画像を追加する

画像を中央揃えにしたいというニーズは非常によくあります。ここでは、すすの画像を用意して、一般的な img タグで追加してみます。

<img class="soot" src="soot.jpg" alt="soot!">

注意： imgタグは子ノードを持てないため、閉じタグは付けません。ブラウザによっては </img> と書いてもエラーにならない場合がありますが、適用したCSSが正しく機能しないことがあります。必ず上記の記述方法に従いましょう。

CSSを何も指定しないまま画像を追加すると、ページ上では次のように表示されます。

これは、画像がページのデフォルトのフロー（通常フロー）に従って配置されるためです。この場合、見出しと同じように左側に表示されます。

中央揃えの方法1：margin: 0 auto

最も簡単な中央揃えの方法は、img セレクターに以下のスタイルを適用することです。

img.soot {
  margin: 0 auto;
  display: block;
}

ここでセレクターにクラス名を付けているのは、詳細度を高めるためです。こうしておけば、後から画像を複数追加しても、すべて確実に中央揃えにできます。

それではページを確認してみましょう。はい、画像が中央に配置されました！

さて、これは何が起きているのでしょうか？

• margin プロパティは4つの値を受け取れます。最初の2つが上下、残りの2つが左右のマージンです。ここでは左右のマージンをブラウザに自動計算させており、その結果、両側が等しくなり画像が中央に配置されます。
• display プロパティにはさまざまな値を指定できます。ここでは「block」を選択しました。これにより、img要素が幅全体を使用し、独立した行に表示されるようになります。マージンが画像の幅全体に対して機能するため、結果として中央揃えになるのです。

中央揃えの方法2：text-align: center;

もう1つの方法として、画像を親要素（例えばdiv）の中に配置し、親要素に text-align を指定するやり方もあります。画像を中央に揃えるには、親要素（コンテナー要素と呼ばれることも多い）に以下を追加します。

.container {
    text-align: center;
}

div 要素は本来ブロックコンテナーであるため、幅全体を使用し、その子要素（今回の場合はすすの画像）が中央に配置されます。

まとめ

「ススワタリ」と発音するのは少し舌を噛みそうになりますが（何度も繰り返すのは大変です）、画像の中央揃え自体は、実際にはとても簡単ですね！