首頁 > web前端 > css教學 > 如何在可調整大小的 Div 中垂直居中文字?

如何在可調整大小的 Div 中垂直居中文字?

Barbara Streisand
發布: 2024-11-09 07:50:02
原創
296 人瀏覽過

How to Vertically Center Text in a Resizable Div?

如何在可調整大小的 Div 中垂直居中文字

使用動態大小的 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元素中文本的垂直居中,包括:

    Windows XP:
  • Internet Explorer 8
  • 歌劇11.62
  • 歌劇11.62
Firefox 3.6.16

Safari 5.1.2

Google Chrome 18
  • Windows 7:
  • Internet Explorer 9
Internet Explorer 9

Firefox 12

    Safari 5.1.4
  • Google Chrome 18
Linux Ubuntu 12.04:Chromium 18

以上是如何在可調整大小的 Div 中垂直居中文字?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板