如何在響應大小的 Div 中垂直居中圖像？

如何在具有靈活高度的Div 中垂直對齊圖像

問題：

您有一個div 容器，根據寬度變化按比例調整的反應高度。在這個容器中，您有一個具有不同高度的圖像。您的挑戰是垂直對齊容器中間的圖像，無論其高度如何。

解決方案：

為了在這個響應式環境中實現垂直對齊，我們引入一種創新方法，涉及在圖像旁邊放置內聯元素。

垂直對齊：

1. 偽元素建立： 在.img-container（託管映像）中，我們直接建立一個區塊級（偽）元素
2. 高度調整：此偽元素展開Vertical 消耗所有可用高度，強制 100% 高度符合容器的高度。
3. 元素的垂直對齊方式： 偽元素和圖像都獲得 Vertical-align: middle;樣式，確保行內正確對齊。
4. 字體大小刪除：要刪除這些元素之間的任何空白，我們設定 font-size: 0;

這種方法的好處：

• 動態容器尺寸
• 自動影像對齊，無明確的高度規範
• 對齊其他元素的多功能性，例如具有可變內容的div（調整font-size回傳顯示文字）

響應式容器：

為了使容器的高度與其寬度靈活，我們在填充上使用百分比值- 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中文網其他相關文章！