如何在 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 中，有必要將兩個最裡面的元素組合成一行以實現正確對齊：

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

以上是如何在 CSS 中垂直對齊動態大小的 Div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！