CSS-Beispiele für die vertikale Zentrierung von Text in einer oder mehreren Zeilen

Im Zeitalter des Tabellenlayouts muss man sich nicht allzu viele Gedanken über die vertikale Zentrierung machen. In Zellen wird standardmäßig eine Textzeile vertikal zentriert, und drei Textzeilen werden ebenfalls vertikal zentriert. Führen Sie ein CSS-Webseitenlayout durch, damit das Formular geändert wird. Der Text wird standardmäßig oben im Container positioniert.

Wie unten gezeigt:

Wie kann man in diesem Fall den Text vertikal zentrieren? Unterteilt in drei Situationen:

1. Wenn es sich um eine einzelne Textzeile handelt, können Sie das Problem mithilfe des Zeilenabstands lösen.

Wir fügen die Definition des Zeilenabstands hinzu, um den Effekt zu erzielen, dass eine einzelne Textzeile vertikal zentriert wird.

2. Wenn es sich um mehrzeiligen Text handelt, hat der übergeordnete Container keine feste Höhe.

Wir können Polsterung verwenden, um das Problem zu lösen.

Stellen Sie die Polsterung des Containers auf denselben festen Wert ein, und die Höhe des Containers nimmt mit zunehmendem Inhalt zu.

Verwenden Sie dies, um eine vertikale Zentrierung von mehrzeiligem Text zu erreichen.