Bagaimana untuk Memusatkan Teks Secara Menegak dalam Div Boleh Resizable?-tutorial css-php.cn

Bagaimana untuk Memusatkan Teks Secara Menegak dalam Div Boleh Resizable?

Barbara Streisand

Lepaskan： 2024-11-09 07:50:02

asal

275 orang telah melayarinya

How to Vertically Center Text in a Resizable Div?

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>

Salin selepas log masuk

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

Salin selepas log masuk

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!