如何在动态大小的容器中垂直对齐图像？

在动态高度容器中垂直对齐图像

问题：如何在高度不同的响应式容器中垂直对齐图像由浏览器根据它们确定宽度？

解决方案：

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="image.jpg" 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;
}

响应式 CSS 代码容器：

.responsive-container {
    position: relative;
}

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

以上是如何在动态大小的容器中垂直对齐图像？的详细内容。更多信息请关注PHP中文网其他相关文章！