Heim > Artikel > Web-Frontend > Wie richtet man Text in HTML zentriert aus? (Codebeispiel)
Wie richtet man Text in HTML zentriert aus? (Codebeispiel)
- 藏色散人Original
- 2018-08-10 17:38:0360187Durchsuche
In diesem Artikel wird hauptsächlich das Schreiben von HTML-Textzentrierungscode beschrieben. Ich hoffe, es hilft Freunden in Not.
Das spezifische Beispiel eines HTML-Textzentrierungscodes lautet wie folgt:
<!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>Die Auswirkung des obigen Codes beim lokalen Testen ist wie folgt:
Können Sie durch diesen Artikel ein besseres Verständnis der relevanten Kenntnisse über die HTML-Textzentrierung erlangen? Tatsächlich erinnern wir uns hier hauptsächlich an diese wichtigen Punkte: Der CSS-Code zum Zentrieren des Textes:
1 das Element Die horizontale Ausrichtung des Textes in .
Dieses Attribut legt die horizontale Ausrichtung von Text innerhalb eines Elements 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;
Das Attribut line-height legt den Abstand zwischen Linien (Linienhöhe) fest.
Hinweis: Negative Werte sind nicht zulässig.
Das obige ist der detaillierte Inhalt vonWie richtet man Text in HTML zentriert aus? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!