如何在 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="image.jpg" 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中文網其他相關文章！