Heim > Artikel > Web-Frontend > So zentrieren Sie Text in CSS
So zentrieren Sie Text in CSS
- 醉折花枝作酒筹Original
- 2021-04-15 19:17:0155363Durchsuche
Methode: 1. Verwenden Sie das text-align-Attribut, um den Text horizontal zentriert einzustellen, die Syntax „text-align:center“ 2. Verwenden Sie das line-height-Attribut, um den Text so einzustellen, dass er vertikal zentriert wird, die Syntax „line-height: value“; 3. CSS3 verwenden Das Flex-Layout legt fest, dass der Text vertikal zentriert ist.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
1. Verwenden Sie das text-align-Attribut, um den Text horizontal zu zentrieren.
Das text-align-Attribut gibt die horizontale Ausrichtung des Texts im Element an und legt fest, dass der Text mithilfe des Mittelwerts zentriert wird.
text-align ist ein grundlegendes Attribut, das beeinflusst, wie Textzeilen in einem Element aneinander ausgerichtet sind. Die Werte „left“, „right“ und „center“ bewirken, dass der Text im Element linksbündig, rechtsbündig bzw. zentriert ist. Wenn Sie den Text zentrieren möchten, verwenden Sie einfach „center“.
Dieses Attribut legt die Zentrierung einiger Inline-Objekte (oder ähnlicher Elemente) wie Text- und IMG-Tags fest.
Dieses Attribut hat die folgenden Eigenschaften:
1) Die Mitte der Textausrichtung wird nur auf den Text im Container angewendet und die Anzeige im Container erfolgt inline oder im Inline-Block Die Containeranzeige ist blockiert, der Inhalt des Containers wird nicht zentriert.
2) Text-align ist nach unten transitiv und wird weiterhin an untergeordnete Elemente weitergegeben. Wenn Sie ein Div festlegen, wird der Inhalt seiner untergeordneten Divs ebenfalls zentriert.
nbsp;html>
<meta>
<title>css 水平居中</title>
<style>
.box {
width: 400px;
height: 100px;
background: pink;
text-align:center;
}
</style>
<div>css 水平居中了--文本文字</div>
Rendering:
2. Verwenden Sie das Attribut „line-height“, um den Text vertikal zu zentrieren.
Das Attribut „line-height“ legt den Abstand zwischen Zeilen (Zeilenhöhe) fest. Negative Werte sind nicht zulässig.
Diese Eigenschaft beeinflusst das Layout des Zeilenfelds. Wenn es auf ein Element auf Blockebene angewendet wird, definiert es den minimalen Abstand zwischen den Grundlinien in diesem Element und nicht den maximalen Abstand.
nbsp;html>
<meta>
<title>css 垂直居中</title>
<style>
.box {
width: 300px;
height: 300px;
background: paleturquoise;
line-height:300px;
}
</style>
<div>css 垂直居中了--文本文字</div>
Rendering:
3, CSS3-Flex-Layout zur vertikalen Zentrierung des Textes
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 200px;
background: #ccc;
/*设置为伸缩容器*/
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>Effekt:
Empfohlenes Lernen: CSS-Video-Tutorial
Das obige ist der detaillierte Inhalt vonSo zentrieren Sie Text in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!