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

將Div 內的影像與回應高度垂直對齊

問題

如何在具有動態高度的div 內垂直對齊影像當調整瀏覽器視窗大小以保持方形寬高時，會調整寬度比例？

垂直對齊

要實現這一點，我們可以採用以下技術：

1. 建立內聯塊偽元素：作為父div的第一個（或最後一個）子元素，產生一個高度為100%的偽元素，佔據整個父元素height.
2. 設定vertical-align：vertical- align屬性應用於偽元素和圖像元素，使它們在容器的中間垂直對齊。
3. 刪除空白： 在父級上設定零字體大小以消除內聯區塊之間的空白

好處

• 容器（父div）可以具有動態尺寸，允許其高度隨寬度變化。
• 影像元素的尺寸不需要明確指定。
• 此技術也可用於將 div 元素與動態內容垂直對齊，但必須重設 div 的字體大小才能顯示包含的文字。

響應式容器

要建立一個響應式容器，其中高度隨寬度調整，我們可以應用頂部/底部填充或邊距屬性的百分比值。

結合垂直對齊和響應式容器

要實現垂直對齊和響應式容器，我們可以將圖像元素包裝在具有絕對定位的包裝器div 中，並將其展開以填充容器的整個空間。

程式碼範例

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

  <div class="img-container">
    <img  src="/static/imghwm/default1.png" data-src="..." class="lazy" alt="如何在響應大小的 Div 中垂直居中圖像？" >
  </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中文網其他相關文章！