Rumah > Artikel > hujung hadapan web > Bagaimana untuk Memusatkan Teks Secara Menegak dalam Div Ketinggian Tidak Diketahui?
Bagaimana untuk Memusatkan Teks Secara Menegak dalam Div Ketinggian Tidak Diketahui?
- Patricia Arquetteasal
- 2024-11-11 09:52:02731semak imbas
Penjajaran Teks Menegak Dinamik dalam Div
Mencapai pemusatan teks menegak dalam div dengan ketinggian yang tidak diketahui boleh menjadi satu cabaran. Mari kita mendalami penyelesaian yang memastikan penjajaran yang konsisten tanpa mengira dimensi div.
Penyelesaian itu memanfaatkan sifat paparan untuk menetapkan elemen pembalut sebagai jadual. Ini membolehkan kami menggunakan sifat penjajaran menegak dalam elemen yang kami mahu pusatkan.
Kod Contoh:
<body>
<div>
<h1>Text</h1>
</div>
</body>
body {width: 100%; height: 100%;} /* This is just to "view" the div height... */
div {
position:absolute; height:100%; width:100%;
display: table;
}
h1 {
display: table-cell;
vertical-align: middle;
text-align:center;
}
Bagaimana ia Berfungsi:
- Kedudukan: mutlak dan ketinggian: 100% sifat memastikan bahawa div meliputi keseluruhan ketinggian halaman web.
- Dengan menetapkan paparan: jadual pada div, kami membenarkan sifat sel jadual pada teg h1 menjajarkan kandungannya secara menegak.
- Tegak- align: sifat tengah memusatkan teg h1 secara menegak dalam div. Ini memastikan bahawa teks kekal di tengah walaupun apabila div berubah saiz.
Penyelesaian ini telah diuji pada pelbagai penyemak imbas dan sistem pengendalian, termasuk Internet Explorer, Firefox, Chrome, Opera dan Safari. Ia menyediakan cara yang mudah dan berkesan untuk memusatkan teks secara menegak dalam div ketinggian dinamik.
Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Teks Secara Menegak dalam Div Ketinggian Tidak Diketahui?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!