Rumah > Artikel > hujung hadapan web > Bagaimana untuk Memusatkan Teks Secara Menegak dalam Div Boleh Resizable?
Bagaimana untuk Memusatkan Teks Secara Menegak dalam Div Boleh Resizable?
- Barbara Streisandasal
- 2024-11-09 07:50:02265semak imbas
Cara Memusatkan Teks Secara Menegak dalam Div Boleh Resizable
Apabila bekerja dengan elemen div bersaiz dinamik, ia boleh menjadi mencabar untuk mengekalkan penjajaran menegak teks dalam div. Isu ini timbul apabila ketinggian div tidak ditetapkan, kerana ia boleh berbeza-beza bergantung pada faktor seperti ketinggian penyemak imbas pengguna.
Penyelesaian:
Untuk menangani masalah ini , penyelesaian serba boleh melibatkan penggunaan sifat paparan untuk mengubah elemen div menjadi struktur jadual. Dengan menetapkan sifat paparan kepada jadual, kami mencipta persekitaran seperti jadual dalam div. Ini membolehkan kami menggunakan sifat penjajaran menegak pada elemen teks untuk memusatkannya secara menegak dalam div.
Penanda HTML:
<body>
<div>
<h1>Text</h1>
</div>
</body>
CSS Penggayaan:
body {
width: 100%;
height: 100%;
}
div {
position: absolute;
height: 100%;
width: 100%;
display: table;
}
h1 {
display: table-cell;
vertical-align: middle;
text-align: center;
}
Pelayar Terkenal Diuji:
Menggunakan teknik ini, kami telah berjaya menguji pemusatan menegak teks dalam elemen div dalam pelbagai penyemak imbas, termasuk:
Windows XP:
- Internet Explorer 8
- Opera 11.62
- Firefox 3.6.16
- Safari 5.1.2
- Google Chrome 18
Windows 7:
- Internet Explorer 9
- Opera 11.62
- Firefox 12
- Safari 5.1.4
- Google Chrome 18
Linux:Linux
- Firefox 12
- Chromium 18
Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Teks Secara Menegak dalam Div Boleh Resizable?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!