首頁 >web前端 >css教學 >如何在動態高度 Div 中垂直居中文字?

如何在動態高度 Div 中垂直居中文字?

Barbara Streisand
Barbara Streisand原創
2024-11-07 12:13:03518瀏覽

How to Vertically Center Text in Dynamically Height Divs?

動態高度Div 中的垂直文字對齊

將網站元素客製化為使用者可調節的瀏覽器高度時,通常必須確保垂直對齊動態高度div 內的文字保持居中。如何實現這一點?

考慮以下HTML 結構:

垂直對齊

邊界
內的標籤無論其高度如何,都採用以下策略:

解決方案: 利用display 屬性將包裝器

設定為元素作為表格,允許垂直對齊屬性將所包含的元素居中。

範例碼:

HTML

CSS

  • 此方法已在各種瀏覽器和平台上進行了測試,包括:
  • 已測試系統:

Windows XP Professional,Service Pack 3

Windows 7 家用版,Service Pack 1
  • Linux Ubuntu 12.04
  • 已測試瀏覽器:
  • >
  • Internet Explorer 8.0.6001.18702、9.0.8112.164211C
  • Opera 11.62
  • Firefox 3.6.16、12.0🎜>
Firefox 3.6.16、12.0 >Google Chrome 18.0.1025.168 mChromium 18.0.1025.151(開發者版本130497 Linux)

以上是如何在動態高度 Div 中垂直居中文字?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn