Maison > Article > interface Web > Comment centrer le texte en CSS
Comment centrer le texte en CSS
- 青灯夜游original
- 2021-04-20 17:18:4726574parcourir
Méthodes de centrage du texte : 1. Utilisez l'instruction "text-align:center;" pour définir le centrage horizontal ; 2. Utilisez la disposition flexible de CSS3 pour définir le centrage vertical ; display: table-cell;" l'instruction définit le centrage vertical.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
css définit le texte pour qu'il soit centré horizontalement
En CSS, vous pouvez utiliser l'attribut text-align pour définir la police pour qu'elle soit horizontale centré. Cette propriété spécifie l'alignement horizontal du texte dans l'élément, en utilisant la valeur centrale pour centrer le texte.
syntaxe d'alignement du texte :
text-align : left | right | center | justify
valeur et description du paramètre d'alignement du texte :
gauche : gauche Aligner
à droite : Aligner à droite
centre : Centrer
justifier : Justifier les deux extrémités ( Non recommandé, généralement non utilisé par la plupart des navigateurs)
Nos valeurs de paramètres couramment utilisées pour l'alignement du texte sont gauche, droite, centre
Les attributs sont les suivants Caractéristiques :
1) Le centre de text-align est appliqué à un conteneur. Il cible uniquement le texte dans le conteneur et le conteneur dont l'affichage est en ligne ou en ligne-bloc si l'affichage du conteneur à l'intérieur l'est. inline ou inline-block, block, 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é.
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 水平居中</title>
<style>
.box {
width: 400px;
height: 100px;
background: palegoldenrod;
text-align:center;
}
</style>
</head>
<body>
<div class="box">css文本文字--水平居中</div>
</body>
</html>Rendu :
(Partage de vidéos d'apprentissage : css tutoriel vidéo)
css définit le texte pour qu'il soit centré verticalement
1. 🎜>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: palegoldenrod;
line-height:300px;
/*设置为伸缩容器*/
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 : 
2. vertical-align:middle +display:table-cell rend le texte centré verticalement.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box {
width: 300px;
height: 300px;
background: palegoldenrod;
vertical-align:middle;
display:table-cell;
}
</style>
</head>
<body>
<div class="box">css 文本文字--水平居中</div>
</body>
</html>Rendu : 
Vidéo de programmation ! !
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!