レスポンシブなサイズの Div 内で画像を垂直方向の中央に配置する方法

応答性の高い高さを持つ Div 内の画像を垂直方向に整列させる

問題

動的な高さを持つ div 内で画像を垂直方向に整列するにはどうすればよいですか正方形の縦横比を維持するためにブラウザ ウィンドウのサイズが変更されたときに幅に調整されます。

垂直配置

これを実現するには、次の手法を使用できます:

1. インラインブロック擬似要素を作成します: 親 div の最初 (または最後の) 子として、高さ 100% の疑似要素が生成されます
2. Setvertical-align:vertical-align プロパティは、擬似要素と image 要素の両方に適用され、擬似要素と image 要素を中央で垂直に配置します。
3. 空白を削除: 親にフォント サイズ 0 が設定され、空白が削除されます。インラインブロック要素間のスペース。

利点

• コンテナ (親 div) は動的なサイズを持つことができ、幅に応じて高さを変更できます。
• 画像要素の寸法を明示的に指定する必要はありません。
• この手法は、垂直方向の位置合わせにも使用できます。動的コンテンツを含む div 要素ですが、囲まれたテキストを表示するには div のフォント サイズをリセットする必要があります。

レスポンシブ コンテナ

レスポンシブ コンテナを作成するには、高さ幅に合わせて調整する場合は、上下のパディングまたはマージンのプロパティにパーセント値を適用できます。

垂直方向の配置とレスポンシブ コンテナ

垂直方向の配置とレスポンシブ コンテナの両方を実装するには、絶対配置を使用して画像要素をラッパー div でラップし、コンテナのスペース全体を埋めるように展開します。

コード例

<div class="responsive-container">
  <div class="dummy"></div>

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

.responsive-container {
  width: 60%;
  position: relative;
}

.dummy {
  padding-top: 100%; /* maintains 1:1 aspect ratio */
}

.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;
}

このコードは、レスポンシブ コンテナ内で画像を垂直に配置する方法を示しています。コンテナの高さは、利用可能な幅に基づいて調整されます。

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