如何在响应大小的 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="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" 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中文网其他相关文章！