Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Memusatkan Teks Secara Menegak dalam Divs Ketinggian Dinamik?

Bagaimana untuk Memusatkan Teks Secara Menegak dalam Divs Ketinggian Dinamik?

Barbara Streisandasal: 2024-11-07 12:13:03557semak imbas

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>

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

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;
}

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!

chrome html Property this display table windows linux ubuntu

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk Menyesuaikan Imej Kursor dalam CSS Merentasi Pelayar Berbeza?Artikel seterusnya：Bagaimana untuk Menyesuaikan Imej Kursor dalam CSS Merentasi Pelayar Berbeza?

Artikel berkaitan

Lihat lagi