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>
以上是如何在 CSS 中將 Div 與動態大小垂直對齊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
