響應式Div 元素中的垂直文字對齊
處理動態大小的DIV 容器中的內容時,垂直對齊文字可能具有挑戰性。本問題探討如何在 DIV 元素內垂直居中文本,無論其高度為何。
問題陳述:
考慮以下 HTML 結構:
<body> <div>
無論 DIV 的高度如何,H1 標籤如何在 DIV 內垂直居中?
解:
最有效的解法是利用 display 屬性。將包裝元素設定為表格,我們可以使用vertical-align:middle來讓元素居中:
<body> <div>Text
body {width: 100%; height: 100%;} /* For visualization purposes */ div { position:absolute; height:100%; width:100%; display: table; } h1 { display: table-cell; vertical-align: middle; text-align:center; }
測試:
此解決方案在各種平台和瀏覽器上進行了測試,包括:
Windows XP Professional versão 2002 Service Pack 3
Internet Explorer 9.0.8112.164211COpera 11.62
Linux Ubuntu 12.04
以上是如何在響應式 div 元素中垂直居中文字?的詳細內容。更多資訊請關注PHP中文網其他相關文章!