如何在具有響應高度的 Div 中垂直居中影像？

將Div 內的圖像與響應高度垂直對齊

在本指南中，我們將介紹如何在具有響應高度的div 內垂直對齊圖像.

方法

為了實現垂直對齊，我們將採用內聯塊元素並利用CSS屬性，如位置、頂部、高度和文字對齊。其運作原理如下：

1.建立一個偽元素

新增一個內聯塊偽元素作為容器 div 的第一個子元素。將其高度設定為 100% 以填充容器的高度。

2.垂直對齊

將偽元素和影像的vertical-align屬性設為middle，以確保它們垂直對齊。

3.刪除間距

要消除偽元素和圖像之間的任何空白，請將父級 div 的 font-size 設為 0，則折疊所有文字內容。

實作

考慮以下HTML 和CSS：

<div class="container">
  <div class="img-container">
    <img src="/static/imghwm/default1.png" data-src="..." class="lazy" 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-height 和 max-width 屬性：

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

以上是如何在具有響應高度的 Div 中垂直居中影像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！