So zentrieren Sie CSS-Text vertikal-Front-End-Fragen und Antworten-php.cn

So zentrieren Sie CSS-Text vertikal

藏色散人

Freigeben： 2023-01-05 16:12:38

Original

48039 Leute haben es durchsucht

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.

So zentrieren Sie CSS-Text vertikal

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>

Nach dem Login kopieren

Rendering:

So zentrieren Sie CSS-Text vertikal

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>

Nach dem Login kopieren

Rendering:

So zentrieren Sie CSS-Text vertikal

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>

Nach dem Login kopieren

Rendering:

So zentrieren Sie CSS-Text vertikal

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!