如何在 CSS 中垂直对齐动态大小的 Div？

CSS 中动态大小的 Div 的垂直对齐

当 div 的高度和宽度事先未知时，垂直对齐 div 容器可能会带来挑战。当 div 包含图像或 Flash 对象时，通常会发生这种情况。

动态大小的垂直对齐

要在这种情况下实现垂直对齐，我们可以利用以下功能CSS2 的。该解决方案不涉及任何技巧或技巧，仅依赖 CSS 原理。

对齐的关键是 vertical-align: middle 和 line-height: 0 应用于容器（'center'）内的子元素（'wrap'）。但是，要实现此功能，容器必须具有固定的行高。

HTML 结构：

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

CSS 样式：

<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 被赋予相对位置并垂直对齐为父容器的 50%。它的高度设置为 2000px，以确保有足够的空间进行对齐。
• 将行高设置为 0： 'wrap' div 的行高设置为 0，有效地消除行之间的任何空格.
• 中间对齐： 'wrap' div 的子图像使用 'vertical-align: middle' 在中心垂直对齐。

兼容性

此解决方案已在 IE8、Opera、Safari、Firefox 和 Chrome 中进行了测试。

IE7 警告：

在 IE7 中，有必要将两个最里面的元素组合成一行以实现正确对齐：

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