如何使用 CSS 垂直对齐动态大小的 Div？

使用 CSS 实现动态大小的 Div 垂直对齐

在 CSS 世界中，实现完美对齐可能是一个挑战，尤其是在处理未知或动态大小的 div。考虑以下场景：您有一个包含图像或 Flash 对象的 div，并且希望将其在其父容器内垂直对齐，而不管容器或子容器的尺寸如何。

解决方案：

CSS 为这个困境提供了一个优雅的解决方案。利用vertical-align: middle和line-height: 0的组合，我们可以在不确定大小的容器内实现水平和垂直居中。

HTML结构：

<code class="html"><span id="center">
  <span id="wrap">
    <img src="http://lorempixum.com/300/250/abstract" alt="" />
  </span>
</span></code>

CSS 样式：

<code class="css">html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
#center {
  position: relative;
  display: block;
  top: 50%;
  margin-top: -1000px;
  height: 2000px;
  text-align: center;
  line-height: 2000px;
}
#wrap {
  line-height: 0;
}
#wrap img {
  vertical-align: middle;
}</code>

说明：

• vertical-align：中间对齐图像#wrap 元素，无论其高度如何。
• line-height: 0 删除 #wrap 元素的默认行距，确保它没有固有高度。
• 通过设置 text- align：将center和line-height调整为所需的容器高度，我们建立一条基线，将图像在容器内垂直对齐。
• #center元素用于将容器在父容器内垂直定位并居中使用 CSS 转换。

Internet Explorer 7 的注意事项：为了确保与 IE7 的兼容性，最里面的元素（#wrap 和 ）应在单行上声明，如此修改后所示HTML 结构：

<code class="html"><span id="center">
  <span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="" /></span>
</span></code>

这种纯 CSS2 解决方案为具有动态尺寸的 div 提供可靠的对齐方式，无论它们包含图像、Flash 对象还是其他元素。

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