如何在具有响应高度的 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="..." 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中文网其他相关文章！