Bagaimana untuk Memusatkan Teks Secara Menegak dalam Divs Ketinggian Dinamik?-tutorial css-php.cn

Bagaimana untuk Memusatkan Teks Secara Menegak dalam Divs Ketinggian Dinamik?

Barbara Streisand

Lepaskan： 2024-11-07 12:13:03

asal

569 orang telah melayarinya

How to Vertically Center Text in Dynamically Height Divs?

Penjajaran Teks Menegak dalam Div Ketinggian Dinamik

Apabila menyesuaikan elemen tapak web kepada ketinggian penyemak imbas boleh laras pengguna, selalunya penting untuk memastikan penjajaran menegak teks dalam div ketinggian dinamik kekal berpusat. Bagaimanakah ini boleh dicapai?

Pertimbangkan struktur HTML berikut:

<body>
    <div>

Salin selepas log masuk

Untuk menjajarkan

teg dalam sempadan

tanpa mengira ketinggiannya, gunakan strategi berikut:

Penyelesaian: Manfaatkan sifat paparan untuk menetapkan pembalut

elemen sebagai jadual, membenarkan sifat penjajaran menegak untuk memusatkan elemen yang terkandung.

Kod Contoh:

HTML

<body>
    <div>
        Text

Salin selepas log masuk

CSS

body {width: 100%; height: 100%;}   /* for visual demonstration of div height...*/

div {
    position:absolute; height:100%; width:100%;
    display: table;
}
h1 {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

Salin selepas log masuk

Pendekatan ini telah diuji pada pelbagai pelayar dan platform, termasuk:

Sistem Diuji:

Windows XP Professional, Service Pack 3
Windows 7 Home Edition, Service Pack 1
Linux Ubuntu 12.04

Diuji Pelayar:

Internet Explorer 8.0.6001.18702, 9.0.8112.164211C
Opera 11.62
Firefox 12.>
Firefox >
Google Chrome 18.0.1025.168 m
Chromium 18.0.1025.151 (Pembangun Binaan 130497 Linux)

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Teks Secara Menegak dalam Divs Ketinggian Dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!