如何在响应大小的 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中文网其他相关文章！