Comment centrer verticalement le texte CSS

Comment centrer verticalement le texte en CSS : 1. Utilisez l'attribut line-height pour centrer verticalement le texte ; 2. Formatez les blocs externes dans les cellules du tableau ; 3. Centrez verticalement le texte via la disposition flexible CSS3.

L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.

Méthode :

Méthode 1 : Utilisez l'attribut line-height pour centrer le texte verticalement

L'attribut line-height définit la distance entre les lignes (hauteur de ligne ); les valeurs négatives ne sont pas autorisées pour cet attribut.

L'attribut line-height affecte la disposition de la zone de ligne. Lorsqu'il est appliqué à un élément de niveau bloc, il définit la distance minimale entre les lignes de base dans cet élément plutôt que la distance maximale.

La différence calculée entre la hauteur de ligne et la taille de police (appelée « espacement des lignes » en CSS) est divisée en deux moitiés et ajoutée en haut et en bas d'une ligne de contenu textuel. La plus petite boîte pouvant contenir ce contenu est une boîte de ligne.

      
  
css 垂直居中了--文本文字
  

Rendu :

Méthode 2 : Formater le bloc externe dans une cellule du tableau

Le contenu de la cellule du tableau peut être vertical Centre, format le bloc extérieur comme cellule de tableau pour centrer verticalement le texte.

Exemple : Placer un paragraphe à l'intérieur d'un bloc avec une hauteur donnée spécifique

      
  
css 垂直居中了--文本文字
  

Rendu :

Méthode 3 : Utiliser CSS3 Le flex la mise en page rend le texte centré verticalement

      
  
css 垂直居中--文本文字（弹性布局）
  

Rendu :

Pour des connaissances HTML/CSS plus détaillées, veuillez visiterTutoriel vidéo CSSColonne !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!