CSS で画像を中央に配置

1. CSS で display および margin プロパティを使用して画像を中央に配置する
2. CSS で text-align プロパティを使用して画像を中央揃えにする
3. flexbox CSS プロパティを使用して画像を中央揃え

この記事では、CSS を使用して画像を HTML の中央に配置する 3つの方法を紹介します。

CSS で display および margin プロパティを使用して画像を中央に配置する

display と margin CSS プロパティを一緒に使用して、画像を中央に配置できます。画像の display プロパティは、最初は inline です。したがって、1 行に複数の画像を追加できます。たとえば、次のコードを書くと、2つの画像が連続して表示されます。

<img src="apple.jpg" alt="apple"/>
<img src="banana.jpg" alt="banana" /> 

したがって、画像の display プロパティを block に変更して、1 行に 1つの画像のみが配置されるようにする必要があります。次に、0px auto の画像 margin を中央に配置します。画像には、上下から 0px の余白があります。最初の値は任意の数値にすることができますが、2 番目の値は auto でなければなりません。auto は画像に margin を与え、画像を真ん中に配置します。このプロセスは、1 行の画像を 1つだけ中央に配置する必要がある場合にのみ機能します。

たとえば、HTML ドキュメントを作成し、img タグを使用して画像を配置します。何らかの理由で画像が表示されない場合に画像を意味のあるものにするために、src 値を正しく記述し、alt を記述します。src 属性でプレースホルダー画像 https://loremflickr.com/320/240 を使用します。CSS で、display プロパティを block に設定し、0px auto の margin を指定します。margin の最初の値は、要件に応じて任意の数値に設定されます。

次の例は、display 値を block に設定し、margin に 0px auto を指定すると、画像が中央に配置されることを示しています。

サンプルコード：

<img src="/img/DelftStack/logo.png" alt="Logo" />

img{
 display: block;
 margin: 0px auto;
}

CSS で text-align プロパティを使用して画像を中央揃えにする

text-align CSS プロパティを使用して、画像を中央に配置できます。画像を div 内にラップし、text-align プロパティを center に設定すると、画像が中央に配置されます。この方法では、1つの画像のみを中央に配置する以前の方法とは異なり、複数の画像を 1 行に中央揃えにすることができます。この方法は、単一の画像と複数の画像の両方に使用できます。

たとえば、div を作成し、それに parent のクラスを指定します。次に、div 内で、img タグを使用して画像をアップロードします。src を https://loremflickr.com/320/240 に設定し、alt を cat に設定します。CSS で、クラス名、つまり .parent を使用して div を選択し、その text-align プロパティを center に設定します。

次の例は、div の text-align CSS プロパティを center に設定すると、div 内の画像が中央に配置されることを示しています。

サンプルコード：

<div class="parent">
 <img src="/img/DelftStack/logo.png" alt="Logo" />
</div>

.parent{
 text-align : center;
}

flexbox CSS プロパティを使用して画像を中央揃え

Flexbox は、最も広く使用されている CSS テクノロジーの 1つです。flexbox の背後にある主なアイデアは、コンテナにアイテムを変更する機能を与えることです。display プロパティを flex に設定することで、コンテナ内の flexbox プロパティを使用できます。次に、justify-content: center プロパティを使用して、コンテナ内のアイテムまたは画像を水平方向に中央揃えにします。align-items プロパティを center に設定して、アイテムを垂直方向に中央揃えにすることができます。

たとえば、div を作成し、それに container というクラス名を付けます。次に、src と alt を付けた img タグを使用して、div 内に画像を配置します。クラス名、つまり .container を使用して div を選択し、その display プロパティを flex に設定します。次に、justify-content``flexbox プロパティを center に設定します。

次の例は、div 内の image が flexbox プロパティを使用して中央に配置されていることを示しています。

<div class="container">
 <img src="/img/DelftStack/logo.png" alt="Logo" />
</div>

.container{
 display: flex;
 justify-content: center;
}