kod css untuk merealisasikan text vertical centering_Experience exchange-www.jb51.net-css vertical centeringwww.jb51.net css vertical centering-tutorial css-php.cn

Cara menetapkan teks dalam CSS supaya teks dalam objek berpusat secara menegak pada objek juga merupakan masalah yang mengganggu ramai rakan. Banyak kod di Internet hari ini tidak serasi dengan penyemak imbas. Saya menyusun kaedah yang berkaitan di Internet dan membuat beberapa perubahan Ia serasi sepenuhnya dengan semua penyemak imbas arus perdana. Mari kita bincangkan tentang kaedah pemusatan menegak dalam situasi yang berbeza. 1. Baris teks berpusat secara menegak Lihat kod berikut:

; fungsi sel(id) {switch(id) {case "1":document.getElementById("sub").style . lineHeight = "normal";break;case "2":document.getElementById("sub").style.lineHeight = "20px";break;case "3":document.getElementById("sub").style.lineHeight = "28px";break;}} #semua { lebar: 240px; 10px ; saiz fon: 12px; warna:#FFF; warna latar:#CCC; : 0 5px; tinggi: 20px; limpahan: tersembunyi; } pilih { lebar: 260px; = "semua"> Sebaris teks dipusatkan secara menegak, dan ketinggian objek ini ialah 20px

Nilai lalai, tetapkan ketinggian baris kepada: normal &lt ;nilai pilihan="2"&gt ;Tetapkan ketinggian garisan supaya sama dengan ketinggian objek: 20px Tetapkan ketinggian garisan supaya lebih besar daripada ketinggian objek : 28px

Kaedah: line-height: 20px. Tetapkan ketinggian baris dan ketinggian objek yang sama.

Nota: Tetapan ini mudah dan serasi dengan pelbagai penyemak imbas serta menyokong objek sebaris. Tetapi jika ia adalah objek dengan ketinggian tetap, hanya satu baris boleh dipaparkan. Apabila terdapat dua baris teks, jika "overflow:hidden" tidak ditetapkan, objek akan diregangkan.

2. Teks berbilang baris dan sangat adaptif

Sila lihat kod di bawah:

Kaedah: padding-top:10px; Tetapkan padding atas dan bawah yang sama.

Penerangan: Serasi dengan pelbagai penyemak imbas, menyokong objek sebaris dan juga menyokong objek bukan teks, seperti img. Tetapi satu kelemahan ialah ketinggian objek tidak boleh diperbaiki.

3. Memusatkan teks berbilang baris secara menegak dengan ketinggian tetap

Kaedah ini lebih rumit, dan saya akan menerangkannya secara terperinci. Mari lihat kod dahulu:

Kaedah:

(1) vertical-align:mid; display:table-cell. Maksud kaedah ini ialah memaksa objek ke Jadual Fungsi vertical-align:middle adalah sama seperti valign="center" dalam jadual.

Pada asalnya atribut yang sangat mudah, tetapi IE tidak menyokong atribut ini. Untuk menjadikan setiap pelayar serasi, kita perlu memikirkan kaedah lain.

(2) Buat sub-objek dalam objek, dan cipta sub-objek atau perenggan dalam sub-objek. Dalam halaman web:

Terdapat teks berbilang baris di sini, ketinggiannya ialah 50px. Terdapat teks berbilang baris di sini. ketinggiannya ialah 50px

&lt ;/p>

Dalam CSS:

p {margin:0;}: Kerana P lalai dalam FireFox dijarakkan

#a {height:50px;position:relative;}: Tetapkan ketinggian kepada 50. Jika sub-objek hendak diposisikan secara relatifnya, tetapkan position:relative

#a p { *position:absolute;*top:50%; }: Asterisk "*" di hadapan hanya disokong oleh IE, pelayar lain akan mengabaikan tetapan ini. position:absolute menetapkan kedudukan objek anak ini kepada kedudukan mutlak, top:50% menetapkan paparan pada 50% dari atas, iaitu, 25px (kerana ketinggian objek induk ditetapkan kepada 50px di atas).

#a p p {*position:relative;*top:-50%;}: Kod ini hanya boleh difahami sebagai bergerak ke atas sebanyak 50% daripada ketinggian yang tinggal. Kerana atas ditetapkan kepada nilai negatif, ia bersamaan dengan bergerak ke arah yang bertentangan.

Nota: Menyokong penyemak imbas arus perdana (diuji di bawah IE6, FireFox2).