Bagaimana untuk Memusatkan Teks Secara Menegak dalam Div Ketinggian Tidak Diketahui?-tutorial css-php.cn

Bagaimana untuk Memusatkan Teks Secara Menegak dalam Div Ketinggian Tidak Diketahui?

Patricia Arquette

Lepaskan： 2024-11-11 09:52:02

asal

766 orang telah melayarinya

How to Vertically Center Text in a Div of Unknown Height?

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>

Salin selepas log masuk

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

Salin selepas log masuk

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!