Wie zentriere ich Text innerhalb eines DIV vertikal?

Vertikale Textausrichtung innerhalb eines DIV

Bei der Suche nach der vertikalen Zentrierung von Text innerhalb eines DIV stößt der bereitgestellte Code auf ein Hindernis. Trotz der Verwendung des Attributs „margin-top“ bleibt die gewünschte Ausrichtung schwer zu erreichen. Um dieses Problem anzugehen, ist ein verfeinerter Ansatz erforderlich.

Lösung:

Der Schlüssel zum Erreichen einer vertikalen Ausrichtung liegt in der Änderung des CSS-Stils des DIV. Abhängig von den spezifischen Anforderungen und der Komplexität des Inhalts kann eine Kombination von Techniken eingesetzt werden:

• Für eine einzelne Textzeile:

Stellen Sie die „line-height“-Eigenschaft des DIV so ein, dass sie mit seiner Höhe übereinstimmt. Dadurch wird der Browser angewiesen, über und unter dem Text den gleichen Platz zuzuweisen und ihn effektiv vertikal zu zentrieren.

Beispiel:

div {
  height: 200px;
  line-height: 200px;
}

<div>Vertically Centered Text</div>

Das obige ist der detaillierte Inhalt vonWie zentriere ich Text innerhalb eines DIV vertikal?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!