使用動態大小的 div 元素時,保持 div 內文字的垂直對齊可能很困難。當 div 的高度不固定時,就會出現此問題,因為它可能會根據使用者瀏覽器高度等因素而變化。
解決方案:
解決此問題,一個通用的解決方案涉及利用顯示屬性將 div 元素轉換為表格結構。透過將 display 屬性設為 table,我們在 div 中建立了一個類似表格的環境。這允許我們使用文字元素上的 Vertical-align 屬性將其在 div 內垂直居中。
HTML標籤:
<body> <div> <h1>Text</h1> </div> </body>
CSS樣式:
body { width: 100%; height: 100%; } div { position: absolute; height: 100%; width: 100%; display: table; } h1 { display: table-cell; vertical-align: middle; text-align: center; }
著名瀏覽器測試:
著名瀏覽器測試:
使用此技術,我們成功測試了各種瀏覽器中div元素中文本的垂直居中,包括:
Safari 5.1.2
Google Chrome 18Firefox 12
以上是如何在可調整大小的 Div 中垂直居中文字?的詳細內容。更多資訊請關注PHP中文網其他相關文章!