CSSで画像を中央に配置する方法

Webデザインにおいて、写真は欠かせない要素です。画像のサイズが親コンテナより小さい場合、または親コンテナの幅と高さが不明な場合、画像をどのように中央に配置するかが問題になります。この問題は、CSS の flex レイアウトと位置プロパティによって解決できます。

1. フレックス レイアウトを使用する

フレックス レイアウトは、CSS3 で導入された新しいレイアウト方法です。コンテナのレイアウトを柔軟に制御できます。子要素を親コンテナの中央に配置するのが非常に簡単です。 。

1. justify-content プロパティと align-items プロパティを使用する

フレックス レイアウトで justify-content プロパティと align-items プロパティを使用して、画像の水平方向と垂直方向の中央揃えを実現できます。 justify-content 属性は主軸方向の子要素のレイアウトを制御でき、align-items 属性は交差軸方向の子要素のレイアウトを制御できます。

まず、画像の親コンテナを display:flex に設定し、align-items と justify-content を center に設定する必要があります。

<div class="parent">
  <img src="your-image.jpg">
</div>

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

このようにして、画像は水平方向と垂直方向の中央に配置されます。

2. flex-direction 属性と align-self 属性を使用する

フレックス レイアウトで flex-direction 属性と align-self 属性を使用して、画像を中央に配置することもできます。 flex-direction プロパティは主軸の方向を変更でき、align-self プロパティは交差軸方向の子要素のレイアウトを制御できます。

画像の親コンテナをdisplay:flexに設定し、flex-directionをcolumnに設定します。

<div class="parent">
  <img src="your-image.jpg">
</div>

.parent {
  display: flex;
  flex-direction: column;
}

次に、画像の垂直方向の中央揃えを実現するために、画像の align-self プロパティを center に設定する必要があります。

img {
  align-self: center;
}

2.position 属性を使用する

フレックス レイアウトを使用することに加えて、position 属性を使用して画像を中央に配置することもできます。 Position プロパティの使用方法は少し異なります。

1. 絶対配置を使用する

ピクチャを絶対配置に設定し、left 属性と top 属性を使用して親コンテナ内のピクチャの位置を制御できます。親コンテナの位置を相対に設定して、画像を親コンテナを基準にして配置できるようにします。

<div class="parent">
  <img src="your-image.jpg">
</div>

.parent {
  position: relative;
}

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

このようにして、画像は水平方向と垂直方向の中央に配置されます。

2. 負のマージンを使用する

負のマージンを使用して画像を中央に配置することもできます。このメソッドは、親コンテナに追加の要素を追加することによって実装されます。親コンテナをposition:relativeに設定し、空の要素を追加して、空の要素に画像を配置します。

<div class="parent">
  <div class="placeholder"></div>
  <img src="your-image.jpg">
</div>

.parent {
  position: relative;
}

.placeholder {
  height: 100%;
  margin-right: -100%;
}

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

このようにして、画像を水平方向および垂直方向の中央に配置することもできます。

重要なポイントのまとめ

画像を中央に配置する場合、フレックス レイアウトと位置属性を使用してそれを実現できます。フレックス レイアウトを使用する場合は、justify-content プロパティと align-items プロパティ、および flex-direction プロパティと align-self プロパティを使用できます。位置属性を使用する場合、画像を絶対位置に設定するか、負のマージンを使用することができます。

一般に、フレックス レイアウトを使用する方が柔軟で簡単ですが、CSS3 を使用する必要があり、position 属性を使用する方が古いブラウザとの互換性が高くなります。実際のアプリケーションでは、状況に応じて画像を中央に配置するためにどの方法を使用するかを選択できます。

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