code CSS pour réaliser le centrage vertical du texte_Experience Exchange-www.jb51.net-centrage vertical CSSwww.jb51.net centrage vertical CSS

Comment définir le texte en CSS pour que le texte de l'objet soit centré verticalement sur l'objet est également un problème qui dérange de nombreux amis. De nombreux codes présents sur Internet aujourd'hui ne sont pas compatibles avec les navigateurs. J'ai trié les méthodes pertinentes sur Internet et apporté quelques modifications. Il est entièrement compatible avec tous les navigateurs grand public.
Parlons des méthodes de centrage vertical dans différentes situations.
1. Une ligne de texte est centrée verticalement
Regardez le code suivant :

< head>

;

= "all">

Une ligne de texte est centrée verticalement et la hauteur de cet objet est de 20px

Valeur par défaut, définissez la hauteur de la ligne sur : normal< ;option value="2"> ;Définissez la hauteur de la ligne pour qu'elle soit la même que la hauteur de l'objet : 20pxDéfinissez la hauteur de la ligne pour qu'elle soit supérieure à la hauteur de l'objet : 28px

Méthode : hauteur de ligne : 20px. Définissez la même hauteur de ligne et la même hauteur d’objet.

Remarque : ce paramètre est simple et compatible avec divers navigateurs, et prend en charge les objets en ligne. Mais s'il s'agit d'un objet de hauteur fixe, une seule ligne peut être affichée. Lorsqu'il y a deux lignes de texte, si "overflow:hidden" n'est pas défini, l'objet sera étiré.

2. Texte multiligne et hautement adaptatif

Veuillez consulter le code ci-dessous :

Méthode : padding-top:10px; Définissez le même rembourrage supérieur et inférieur.

Description : Compatible avec divers navigateurs, prend en charge les objets en ligne et prend également en charge les objets non textuels, tels que img. Mais un inconvénient est que la hauteur de l’objet ne peut pas être fixée.

3. Centrer verticalement un texte multiligne avec une hauteur fixe


Cette méthode est plus compliquée, et je vais l'expliquer en détail. Regardons d'abord le code :

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

< ;/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).