Maison >interface Web >Questions et réponses frontales >Comment centrer le texte en CSS
Comment centrer le texte en CSS
- 藏色散人original
- 2021-04-13 09:36:173480parcourir
Comment centrer le texte en CSS : créez d'abord un exemple de fichier HTML ; puis définissez du contenu de texte dans le corps, enfin, utilisez l'attribut "text-align" ou "line-height" pour centrer le texte horizontalement ; ou verticalement. C'est tout.
L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.
Utilisez l'attribut
text-alignpour centrer le texte horizontalement
L'attribut text-align spécifie l'alignement horizontal du texte dans un élément, en en utilisant La valeur centrale définit le texte pour qu'il soit 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é.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 水平居中</title>
<style>
.box {
width: 400px;
height: 100px;
background: pink;
text-align:center;
}
</style>
</head>
<body>
<div class="box">css 水平居中了--文本文字</div>
</body>
</html>Rendu :
Utilisez l'attribut line-height pour centrer verticalement une seule ligne de texte
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.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box {
width: 300px;
height: 300px;
background: paleturquoise;
line-height:300px;
}
</style>
</head>
<body>
<div class="box">css 垂直居中了--文本文字</div>
</body>
</html>Rendu :
Utilisez vertical-align:middle +display:table-cell pour centrer verticalement le texte multiligne
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box {
width: 300px;
height: 300px;
background: paleturquoise;
vertical-align:middle;
display:table-cell;
}
</style>
</head>
<body>
<div class="box">css 垂直居中了--文本文字,文本文字,文本文字,文本文字,文本文字,文本文字。</div>
</body>
</html>Rendu :
Description : vertical-align:middle +display:table-cell peut créer du texte sur une seule ligne et plusieurs texte de ligne Le texte est entièrement centré. Cependant, comme table-cell est un type en ligne, les éléments d'origine au niveau du bloc seront déplacés vers la même ligne par div. Si vous devez diviser les lignes en deux lignes, vous devez ajouter un conteneur supplémentaire à l'extérieur pour contrôler la position.
[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!