Comment centrer le texte en HTML ? (exemple de code)-tutoriel HTML-php.cn

Comment centrer le texte en HTML ? (exemple de code)

藏色散人

Libérer： 2018-08-10 17:38:03

original

60141 Les gens l'ont consulté

Cet article présente principalement comment écrire du code de centrage de texte HTML. J'espère que cela aidera les amis dans le besoin.

L'exemple spécifique de code de centrage de texte HTML est le suivant :

<!DOCTYPE HTML>
<html lang="en">
<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  class="box1">html文字水平居中</div>
<div  class="box2">html文字垂直居中</div>
<div  class="box3">html文字水平上下居中</div>
</body>
</html>

Copier après la connexion

L'effet du code ci-dessus lorsqu'il est testé localement est le suivant :

Comment centrer le texte en HTML ? (exemple de code)

Alors à travers cet article, pouvez-vous mieux comprendre les connaissances pertinentes sur le centrage de texte HTML ? En fait, on retient ici principalement ces points clés. En HTML, le code css pour centrer le texte :

1. Centrage à plat : text-align:center

attribut text-align précise; L'élément L'alignement horizontal du texte dans .

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.

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!