Heim > Artikel > Web-Frontend > Was ist der Stil der HTML-Textzentrierung?
Was ist der Stil der HTML-Textzentrierung?
- 青灯夜游Original
- 2021-02-22 14:48:1718613Durchsuche
HTML-Textzentrierungsstil: 1. Der horizontale Zentrierungsstil ist „text-align: center;“; 2. Der vertikale Textzentrierungsstil ist „line-height:px value;“; ;" align-items: center;".
Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.
HTML-Textzentrierung
1. Text horizontal zentriert – text-align: center;
text-align-Attribut gibt die horizontale Ausrichtung des Textes im 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.
| Wert | Beschreibung |
|---|---|
| links | Text links anordnen. Standard: Wird vom Browser bestimmt. |
| rechts | Text rechts anordnen. |
| Mitte | Ordnen Sie den Text in der Mitte an. |
| justify | Erzielen Sie den Effekt, dass der Text an beiden Enden ausgerichtet wird. |
| inherit | gibt an, dass der Wert des text-align-Attributs vom übergeordneten Element geerbt werden soll. |
Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
h1 {
text-align: center
}
h2 {
text-align: left
}
h3 {
text-align: right
}
</style>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
</body>
</html>Rendering:
[Empfohlene Tutorials: CSS-Video-Tutorial, „HTML-Video-Tutorial“]
2. Text vertikal zentriert
1 ) , line-height macht den einzeiligen Text vertikal zentriert<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: palegoldenrod;
line-height:300px;
}
</style>
</head>
<body>
<div class="box">css 垂直居中了--文本文字</div>
</body>
</html>Rendering:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: paleturquoise;
line-height:300px;
/*设置为伸缩容器*/
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/*垂直居中*/
-webkit-box-align: center;/*旧版本*/
-moz-box-align: center;/*旧版本*/
-ms-flex-align: center;/*混合版本*/
-webkit-align-items: center;/*新版本*/
align-items: center;/*新版本*/
}
</style>
</head>
<body>
<div class="box">css 垂直居中--文本文字（弹性布局）</div>
</body>
</html>
Programmiervideo ! !
Das obige ist der detaillierte Inhalt vonWas ist der Stil der HTML-Textzentrierung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!