如何在動態大小的容器中垂直對齊影像？

在動態高度容器中垂直對齊影像

問題：如何在高度不同的響應式容器中垂直對齊圖像由瀏覽器根據它們確定寬度？

解：

1.使用內嵌元素進行垂直對齊：

要在父元素內垂直對齊內聯元素，請建立一個區塊級（偽）元素作為第一個子元素，並將其高度設為其父元素的100% 。另外，將 vertical-align: middle 應用於偽元素和目標影像元素。

2.好處：

• 支援動態容器尺寸。
• 影像尺寸不需要明確指定。
• 可用於對齊內聯 或 div 垂直元素，可以選擇重置字體大小div 元素來顯示其內容。

3.具有垂直影像對齊的響應式容器：

要建立高度適合其寬度的響應式容器，請為padding- top 屬性使用百分比值。

4。將內容加入響應式容器：

在響應式容器中使用包裝器元素來容納內容。將包裝器絕對定位並將其展開以填充容器的空間。

HTML 代碼：

<div class="responsive-container">
    <div class="dummy"></div>
    <div class="img-container">
        <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="">
    </div>
</div>

垂直對齊的CSS 代碼：

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

.responsive-container {
    position: relative;
}

.responsive-container .wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

以上是如何在動態大小的容器中垂直對齊影像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！