如何在 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="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="">
    </span>
</span></code>

CSS规则

<code class="css">html, body {
    height: 100%;
    width: 100%;
    padding: 0;
}

#center {
    position: relative;
    top: 50%;
    margin-top: -1000px;
    height: 2000px;
    text-align: center;
    line-height: 2000px;
}

#wrap {
    line-height: 0;
}

#wrap img {
    vertical-align: middle;
}</code>

工作原理

• #center 元素的 line-height 设置为固定值（例如 2000px）和 text-align设置为居中。
• #wrap 元素的 line-height 设置为 0。
• 图像的垂直对齐设置为 middle，将其垂直对齐在其包含的行内元素。
• #center 元素的边距是元素高度的负一半，这在视觉上将元素定位在视口的中间。

此技术适用于大多数现代浏览器，包括 IE8，并且不需要浏览器黑客。它提供了一个干净且多功能的解决方案，用于垂直对齐具有动态尺寸的 div 元素。

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