如何在 CSS 中垂直对齐具有未知尺寸的 Div？

尺寸未知的 Div 垂直对齐方式

在 CSS 中，当 div 大小未知时，动态调整 div 的垂直对齐方式可能会很困难。这里有一个解决这个问题的解决方案：

CSS解决方案

这个纯CSS解决方案采用vertical-align: middle在一个具有固定行高的较大div中：

<code class="css">#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>

说明

#center div 位于其父级的中心，top: 50% 和 margin-top 调整以占其高度的一半。巨大的行高确保其中的文本内容（在本例中为子 div #wrap）保留在底部。

在 #center 内，#wrap 包含垂直对齐的图像：middle，无论图像大小如何，都能确保垂直对齐。

警告

唯一有警告的浏览器是 IE7。为此，内部 div #wrap 和图像必须位于同一行：

<code class="html"><span id="center">
  <span id="wrap"><img src="..." alt="" /></span>
</span></code>

以上是如何在 CSS 中垂直对齐具有未知尺寸的 Div？的详细内容。更多信息请关注PHP中文网其他相关文章！