Bagaimana untuk Memusatkan Teks Secara Menegak dalam Divs Ketinggian Dinamik?

Barbara Streisand
Lepaskan: 2024-11-07 12:13:03
asal
501 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.>
  • 12.>
  • Firefox >
  • Safari 5.1.2, 5.1.4
  • 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!

sumber:php.cn
Kenyataan Laman Web ini
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 terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan