如何使用 CSS 垂直對齊動態大小的 Div？

使用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="http://lorempixum.com/300/250/abstract" alt="" />
  </span>
</span></code>

CSS 樣式：

<code class="css">html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
#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>

line-height: 0 刪除 #wrap 元素的預設行距，確保它沒有固有高度。
• 透過設定 text- align：將center和line-height調整為所需的容器高度，我們建立一條基線，將影像在容器內垂直對齊。
• #center元素用於將容器在父容器內垂直定位並居中使用 CSS 轉換。
• Internet Explorer 7 的注意事項：為了確保與IE7 的兼容性，最裡面的元素（#wrap 和）應在單行上聲明，如此修改後所示HTML 結構：

這種純CSS2 解決方案為具有動態尺寸的div 提供可靠的對齊方式，無論它們包含圖像、Flash 物件還是其他元素。

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