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

柔軟な高さで Div 内で画像を垂直に配置する方法

問題:

次の div コンテナーがあります。幅の変化に比例して調整される応答性の高い高さ。このコンテナ内には、さまざまな高さの画像があります。あなたの課題は、高さに関係なく、コンテナの中央で画像を垂直方向に配置することです。

解決策:

このレスポンシブ環境で垂直方向の配置を実現するには、以下を導入します。画像の横にインライン要素を配置するという革新的なアプローチです。

垂直配置:

1. 擬似要素の作成: .img コンテナー (画像をホストする) 内で、ブロックレベルの (擬似) 要素を直接作成します。画像の前
2. 高さ調整: これ擬似要素は垂直方向に拡張して利用可能な高さをすべて消費し、コンテナの高さに合わせて 100% の高さを強制します。
3. 要素の垂直方向の配置: 擬似要素と画像の両方が垂直方向になります。整列: 中央;
4. フォント サイズの削除: これらの要素間の空白を削除するには、font-size: 0 を設定します。

このアプローチの利点:

• コンテナの動的な寸法
• 明示的な高さの指定を必要としない自動画像配置
• 可変コンテンツを持つ div など、他の要素を整列させる多用途性(フォント サイズを調整してテキストを表示します)

レスポンシブ コンテナ:

コンテナの高さをその幅に応じて柔軟にするために、 padding-top プロパティ:

• 100% padding-top: 正方形を作成します高さと幅が等しい
• より高いパーセンテージ値 (例: 150% または 200%): 高さの幅に対するパーセンテージが大きくなります

このパディング手法は、子 div または CSS 疑似要素。

コンテンツ配置:

Padding-top により、コンテナ内のコンテンツの上または下に過剰なスペースが作成されます。これを解決するには、コンテンツをラッパー要素で囲みます。

• 絶対配置: 通常のドキュメント フローからラッパーを削除し、コンテナーのスペース全体を埋めることができるようにします。
• トップ、right、bottom、left プロパティ: ラッパーを展開してコンテナーをカバーします。

最終実装:

これらの手法を組み合わせることで、目標:

<div class="responsive-container">
  <div class="dummy"></div>
  <div class="img-container">
    <img src="image.jpg" alt="Image">
  </div>
</div>

.responsive-container {
  width: 60%;
  height: 300px;  /* Example height for demo purposes */
  position: relative;
}

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

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

.img-container img {
  vertical-align: middle;
  display: inline-block;
  max-height: 100%;  /* Optional: Ensures image stays within container */
  max-width: 100%;   /* Optional: Ensures image stays within container */
}

デモ:

[レスポンシブ Div での画像の垂直方向の整列](https://codepen.io/cristianorocha/pen/dywbQMV) )

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