Heim >Web-Frontend >Front-End-Fragen und Antworten >So zentrieren Sie CSS-Text vertikal
So zentrieren Sie CSS-Text vertikal
- 藏色散人Original
- 2021-04-29 09:15:5048023Durchsuche
So zentrieren Sie Text in CSS vertikal: 1. Verwenden Sie das Attribut line-height, um Text vertikal zu zentrieren. 2. Formatieren Sie externe Blöcke in Tabellenzellen. 3. Zentrieren Sie Text vertikal über das CSS3-Flex-Layout.
Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.
Methode:
Methode 1: 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 für dieses Attribut nicht zulässig.
Das Attribut line-height beeinflusst das Layout von Zeilenfeldern. 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.
Der berechnete Unterschied zwischen Zeilenhöhe und Schriftgröße (in CSS als „Zeilenabstand“ bekannt) wird in zwei Hälften geteilt und am oberen und unteren Rand einer Textzeile hinzugefügt. Die kleinste Box, die diesen Inhalt enthalten kann, ist eine Zeilenbox.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: #ddd;
line-height:300px;
}
</style>
</head>
<body>
<div class="box">css 垂直居中了--文本文字</div>
</body>
</html>Rendering:
Methode 2: Formatieren Sie den äußeren Block in eine Tabellenzelle.
Der Inhalt der Tabellenzelle kann vertikal zentriert werden. Durch Formatieren des äußeren Blocks in eine Tabellenzelle kann der Text vertikal zentriert werden.
Beispiel: Platzieren Sie einen Absatz in einem Block mit einer bestimmten Höhe.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 400px;
height: 200px;
background: #ddd;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box">css 垂直居中了--文本文字</div>
</body>
</html>Rendering:
Methode 3: Verwenden Sie das Flex-Layout von CSS3, um Text vertikal zu zentrieren.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 200px;
background: #ddd;
/*设置为伸缩容器*/
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>Rendering:
Für detaillierteres HTML /CSS-Kenntnisse, besuchen Sie bitte die Rubrik „CSS-Video-Tutorial“!
Das obige ist der detaillierte Inhalt vonSo zentrieren Sie CSS-Text vertikal. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!