Maison > Article > interface Web > Comment centrer verticalement le texte CSS
Comment centrer verticalement le texte CSS
- 藏色散人original
- 2021-04-29 09:15:5047986parcourir
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.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: #ddd;
line-height:300px;
}
</style>
</head>
<body>
<div class="box">css 垂直居中了--文本文字</div>
</body>
</html>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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 400px;
height: 200px;
background: #ddd;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box">css 垂直居中了--文本文字</div>
</body>
</html>Rendu :
Méthode 3 : Utiliser CSS3 Le flex la mise en page rend le texte centré verticalement
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 200px;
background: #ddd;
/*设置为伸缩容器*/
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/*垂直居中*/
-webkit-box-align: center;/*旧版本*/
-moz-box-align: center;/*旧版本*/
-ms-flex-align: center;/*混合版本*/
-webkit-align-items: center;/*新版本*/
align-items: center;/*新版本*/
}
</style>
</head>
<body>
<div class="box">css 垂直居中--文本文字（弹性布局）</div>
</body>
</html>Rendu :
Pour des connaissances HTML/CSS plus détaillées, veuillez visiter Tutoriel 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!