Maison > Article > interface Web > Comment centrer le texte en CSS
Comment centrer le texte en CSS
- 醉折花枝作酒筹original
- 2021-04-15 19:17:0155624parcourir
Méthode : 1. Utilisez l'attribut text-align pour que le texte soit centré horizontalement, la syntaxe "text-align:center" 2. Utilisez l'attribut line-height pour que le texte soit centré verticalement ; centré, la syntaxe "line-height: value"; 3. Utilisez la mise en page flexible de CSS3 pour centrer le texte verticalement.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
1. Utilisez l'attribut text-align pour centrer le texte horizontalement
L'attribut text-align spécifie l'alignement horizontal du texte dans l'élément, définissant le texte en utilisant la valeur centrale Centré.
text-align est un attribut de base qui affecte la façon dont les lignes de texte d'un élément sont alignées les unes avec les autres. Les valeurs gauche, droite et centre entraîneront l'alignement du texte de l'élément respectivement à gauche, à droite et centré. Si vous souhaitez centrer le texte, utilisez simplement centre.
Cet attribut définit le centrage de certains objets en ligne (ou éléments similaires) tels que les balises text et img.
Cet attribut a les caractéristiques suivantes :
1) Le centre de text-align est appliqué à un conteneur. Il cible uniquement le texte dans le conteneur et l'affichage dans le conteneur comme en ligne ou. inline. -Block conteneur, si l'affichage du conteneur à l'intérieur est bloqué, le contenu du conteneur à l'intérieur ne sera pas centré.
2), text-align est transitif vers le bas et continuera à être transmis aux éléments enfants. Si vous définissez un div, le contenu de ses divs enfants sera également centré.
nbsp;html>
<meta>
<title>css 水平居中</title>
<style>
.box {
width: 400px;
height: 100px;
background: pink;
text-align:center;
}
</style>
<div>css 水平居中了--文本文字</div>
Rendu :
2 Utilisez l'attribut line-height pour centrer le texte verticalement
La propriété line-height définit la distance entre les lignes (hauteur de ligne). Les valeurs négatives ne sont pas autorisées.
Cet attribut 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.
nbsp;html>
<meta>
<title>css 垂直居中</title>
<style>
.box {
width: 300px;
height: 300px;
background: paleturquoise;
line-height:300px;
}
</style>
<div>css 垂直居中了--文本文字</div>
Rendu :
3 La mise en page flexible de CSS3 rend le texte centré verticalement
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 200px;
background: #ccc;
/*设置为伸缩容器*/
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>. Effet :
Apprentissage recommandé : tutoriel vidéo CSS
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!