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

HTML ページでは、画像を使用するとページをより豊かにすることができます。ただし、画像を使用する場合、画像が中央に配置されないという問題が発生する場合があります。これは、画像の位置が当社が手動で設定するのではなく、ブラウザによって自動的に決定されるためです。この時点で、CSS を使用して画像を中央に配置できます。この記事ではCSSで画像を中央揃えにする方法を紹介します。

1. マージンを使用して画像を中央に配置します。

マージンを使用して画像を中央に配置するのが最も一般的な方法です。上下左右に 50% のマージン値を追加し、画像の幅/高さのマイナスの半分を追加することで、画像を中央に配置できます。

コード例:

HTML:

<div class="container">
  <img class="center-image" src="example.jpg">
</div>

CSS:

.container {
  position: relative;
}

.center-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2. フレックスボックスを使用して画像を中央に配置します。

フレックスボックスはCSS3 レイアウト。親要素の flex プロパティを設定することで、子要素を簡単に中央に配置できます。たとえば、次の CSS コードでは、すべての子要素を水平方向と垂直方向に中央揃えにできます。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

したがって、特に画像要素を中央揃えにするには、画像が配置されているコンテナをフレックス レイアウトに設定するだけで済みます。 align-items と justify -content 属性で十分です。

コード例:

HTML:

<div class="container">
  <img src="example.jpg">
</div>

CSS:

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

3. グリッドを使用して画像を中央に配置します

フレックスボックスと同様, CSS グリッドを使用して画像を中央に配置することもできます。画像コンテナをグリッドコンテナとして使用し、中央揃えに設定します。

コード例:

HTML:

<div class="container">
  <img src="example.jpg">
</div>

CSS:

.container {
  display: grid;
  place-items: center;
}

概要:

上記は画像を中央に配置する 3 つの方法です、実際の状況に応じて実装する方法を選択できます。マージン方法が最も一般的に使用されますが、他のレイアウトを実装する必要がある場合は、フレックスボックスとグリッドの方が適している場合があります。もちろん、実際の開発では複数の方法を組み合わせて使用​​することもでき、より良い結果を得ることができます。

以上がCSSで画像を中央揃えにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。