Maison >interface Web >Questions et réponses frontales >Comment centrer le texte en HTML
Comment centrer le texte en HTML
- 藏色散人original
- 2021-06-03 10:21:0686392parcourir
Comment centrer le texte en HTML : 1. Définissez le texte pour qu'il soit centré horizontalement via l'attribut "text-align:center;" 2. Définissez le texte pour qu'il soit centré verticalement via l'attribut "line-height : hauteur;" attribut.
L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.
L'exemple spécifique de code de centrage de texte HTML est le suivant :
<!DOCTYPE HTML>
<html>
<head>
<title>html文字居中测试</title>
<meta charset="UTF-8">
<style type="text/css">
body{background: #ddd;}
div{width:300px;height:180px;margin:10px auto;color:#fff;font-size:24px;}
.box1{background: #71a879;text-align: center;}
.box2{background: #6a8bbc;line-height: 200px;}
.box3{background: #dea46b;text-align: center;line-height: 200px;}
</style>
</head>
<body>
<div >html文字水平居中</div>
<div >html文字垂直居中</div>
<div >html文字水平上下居中</div>
</body>
</html>L'effet du code ci-dessus est testé localement comme indiqué ci-dessous :
Rappelez-vous ces points clés, en HTML, le code css pour centrer le texte :
1. Centrage horizontal : text-align:center L'attribut
text-align spécifie l'horizontal; alignement du texte dans l'élément.
Cet attribut définit l'alignement horizontal du texte dans un élément de niveau bloc en spécifiant le point auquel la zone de ligne est alignée. La valeur justifier est prise en charge en permettant aux agents utilisateurs d'ajuster l'espacement entre les lettres et les mots dans le contenu de la ligne. Différents agents utilisateurs peuvent obtenir des résultats différents ;
2. Centrage vertical : line-height:height;
L'attribut line-height définit la distance entre les lignes (hauteur de la ligne).
Remarque : les valeurs négatives ne sont pas autorisées.
[Apprentissage recommandé : Tutoriel vidéo HTML]
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!