Text vertikal zentrieren in CSS

1. Verwenden Sie die Eigenschaft line-height, um den Text in CSS vertikal zu zentrieren
2. Verwenden Sie die Eigenschaften display, vertical-align und line-height, um den Text in CSS vertikal zu zentrieren
3. Simulieren Sie die Tabellenanzeige, um den Text in CSS vertikal zu zentrieren

In diesem Artikel werden Methoden vorgestellt, um die Texte in CSS vertikal zu zentrieren.

Verwenden Sie die Eigenschaft line-height, um den Text in CSS vertikal zu zentrieren

Wir können die Höhe der Eigenschaft line-height als div festlegen, um den Text in CSS vertikal zu zentrieren. Die Eigenschaft line-height gibt die Höhe einer Linie an. Dies lässt sich veranschaulichen, indem man eine Umrandung des Elements div erstellt. Wir können auch die Eigenschaft text-align verwenden und auf center setzen, um den Text horizontal mittig auszurichten.

Erstellen Sie beispielsweise ein div in HTML und schreiben Sie den Text Hello World! zwischen. Als nächstes setzen Sie in CSS die Höhe des div auf 200px. Stellen Sie auch die line-height auf den gleichen Wert ein. Richten Sie den Text mit der Eigenschaft text-align auf center aus. Erstellen Sie einen durchgezogenen Rahmen von 3px Breite in schwarzer Farbe mit der Kurzeigenschaft border.

Im Beispiel unten haben wir die gleichen Pixel von line-height und height des div gesetzt. Dadurch wird der Text vertikal zentriert. Diese Methode funktioniert jedoch nur bei einzeiligen Texten.

Beispielcode:

<div>
    Hello World!
</div>

div {
    height: 200px;
    line-height: 200px;
    text-align: center;
    border: 3px solid black;
}

Verwenden Sie die Eigenschaften display, vertical-align und line-height, um den Text in CSS vertikal zu zentrieren

Wir können den Text in mehreren Zeilen zentrieren, indem wir die verschiedenen CSS-Eigenschaften wie display, vertical-align und line-height verwenden. Die Eigenschaft display legt das Anzeigeverhalten eines Elements fest. Die Eigenschaft vertikal-align ist für die vertikale Ausrichtung des Elements verantwortlich. Wir können display auf inline-block und vertical-align auf middle setzen, um die vertikale Ausrichtung mehrerer Textzeilen zu erreichen.

Erstellen Sie beispielsweise ein div in HTML und schreiben Sie span hinein. Schreiben Sie den Text Hallo und brechen Sie die Zeile mit <br> und schreiben Sie dann World! innerhalb der span. Als nächstes geben Sie in CSS die line-height und die height auf den gleichen Wert von 200px an, indem Sie das div auswählen. Geben Sie dem div einen Rahmen und richten Sie den Text zentriert aus, wie wir es bei der ersten Methode getan haben. Wählen Sie dann span und setzen Sie die Eigenschaft display auf inline-block. Geben Sie dann den Wert von middle der Eigenschaft vertical-align an. Stellen Sie abschließend den Wert von line-height auf normal.

Im folgenden Beispiel haben wir die Eigenschaft line-height in span auf normal geändert, damit die mehrzeiligen Textzeilen die normale line-height haben. Der Wert inline-block startet die nächste Textzeile direkt unter der darüber liegenden Zeile. Der Wert middle der Eigenschaft vertical-align platziert den Text in der Mitte der vertikalen Achse.

Beispielcode:

<div>
    <span>Hello <br> World! </span>
</div>

div {
    height: 200px;
    line-height: 200px;
    text-align: center;
    border: 3px solid black;
}
span {
    display:inline-block;
    vertical-align: middle;
    line-height: normal;
}

Simulieren Sie die Tabellenanzeige, um den Text in CSS vertikal zu zentrieren

Wir können den Text als Tabellenzelle simulieren, um ihn in CSS vertikal zu zentrieren. Wir verwenden die Eigenschaft display, um eine Tabelle zu simulieren. Wir verwenden auch die Eigenschaft vertical-align, um den Text vertikal zu zentrieren. Wir werden am HTML-Snippet der zweiten Methode arbeiten und neues CSS darauf anwenden.

Wählen Sie zunächst das div aus und legen Sie Höhe, Breite und Rahmen fest. Verwenden Sie die Eigenschaft display und setzen Sie den Wert auf table. Dadurch verhält sich das div wie eine Tabelle. Wählen Sie dann span und setzen Sie die Eigenschaft display auf table-cell und die Eigenschaft vertical-align auf middle. Wenn Sie das Element span als table-cell festlegen, wird das Element wie eine Tabellenzelle. Auf diese Weise können wir einen vertikal zentrierten Text erstellen.

Beispielcode:

<div>
    <span>Hello <br> World!</span>
</div>

div {
    display: table;
    height: 200px;
    width: 100%;
    text-align: center;
    border: 3px solid black;
}
span {
    display: table-cell;
    vertical-align: middle;
}