レスポンシブな高さを持つ Div で画像を垂直方向の中央に配置するにはどうすればよいですか?

レスポンシブな高さを持つ Div 内の画像を垂直方向に配置する

このガイドでは、レスポンシブな高さを持つ div 内の画像を垂直方向に配置する方法について説明します.

アプローチ

垂直方向の配置を実現するには、以下を採用します。 inline-block 要素を使用し、position、top、height、text-align などの CSS プロパティを利用します。仕組みは次のとおりです:

1.擬似要素の作成

コンテナ div の最初の子としてインラインブロック擬似要素を追加します。コンテナの高さを満たすように高さを 100% に設定します。

2.垂直方向の配置

疑似要素と画像の両方の垂直方向の配置プロパティを middle に設定して、それらが確実に垂直方向に配置されるようにします。

3.間隔を削除

擬似要素と画像の間の空白を削除するには、親 div のフォント サイズを 0 に設定し、テキスト コンテンツをすべて折りたたみます。

実装

検討次の HTML とCSS:

<div class="container">
  <div class="img-container">
    <img src="..." alt="Image">
  </div>
</div>

.container {
  text-align: center;
  font: 0/0 a;
}

.container:before {
  content: " ";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.img-container {
  display: inline-block;
  vertical-align: middle;
}

結果

この手法により、コンテナーの応答性の高い高さを維持しながら、コンテナー内で画像を垂直方向に整列させることができます。

Max -画像サイズのプロパティ

画像がコンテナのサイズを超えないようにするために、max-height と画像の最大幅プロパティ:

.img-container img {
  ...
  max-height: 100%;
  max-width: 100%;
}

以上がレスポンシブな高さを持つ Div で画像を垂直方向の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。