So zentrieren Sie Text in HTML: 1. Stellen Sie den Text mit dem Attribut „text-align:center;“ so ein, dass er vertikal zentriert ist .
Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.
Das spezifische Beispiel für HTML-Textzentrierungscode lautet wie folgt:
<!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>Der obige Codeeffekt wird lokal getestet, wie unten gezeigt:
Bedenken Sie diese wichtigen Punkte, in HTML der CSS-Code zum Zentrieren von Text:
1. Horizontale Zentrierung :text-align:center; Das Attribut
text-align gibt die horizontale Ausrichtung von Text in einem Element an.
Dieses Attribut legt die horizontale Ausrichtung von Text innerhalb von Elementen auf Blockebene fest, indem es den Punkt angibt, an dem das Linienfeld ausgerichtet wird. Der Wert justify wird dadurch unterstützt, dass Benutzeragenten den Abstand zwischen Buchstaben und Wörtern im Zeileninhalt anpassen können. Verschiedene Benutzeragenten können zu unterschiedlichen Ergebnissen führen.
2. Vertikale Zentrierung: line-height:height;
line-height-Attribut legt den Abstand zwischen Linien (Linienhöhe) fest.
Hinweis: Negative Werte sind nicht zulässig.
【Empfohlenes Lernen: HTML-Video-Tutorial】
Das obige ist der detaillierte Inhalt vonSo zentrieren Sie Text in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
