Wie zentriere ich Text innerhalb eines Div-Elements vertikal?-CSS-Tutorial-php.cn

Wie zentriere ich Text innerhalb eines Div-Elements vertikal?

Barbara Streisand

Freigeben： 2024-12-23 18:22:14

Original

380 Leute haben es durchsucht

How to Vertically Center Text within a Div Element?

Vertikale Ausrichtung in

Elemente

Um Text vertikal in der Mitte eines

auszurichten Unter Beibehaltung einer bestimmten Elementhöhe stehen mehrere Ansätze zur Verfügung:

Verwenden der Zeilenhöhe

Um einzeiligen Text vertikal zu zentrieren, wenden Sie eine Zeilenhöhe an, die der gewünschten entspricht Elementhöhe, wie im folgenden CSS gezeigt:

#abc {
  line-height: 50px;
}

Nach dem Login kopieren

Using Display Eigenschaften

Umbrechen Sie den Text bei mehrzeiligem Text in ein und wenden Sie display:table; und Anzeige: Tabellenzelle; zusammen mit Vertical-Align: Middle; wie folgt:

#abc {
  display: table;
  width: 100%;
}

#abc span {
  vertical-align: middle;
  display: table-cell;
}

Nach dem Login kopieren

Transformationseigenschaft verwenden

Für eine erweiterte Ausrichtung sollten Sie die Verwendung der Transformationseigenschaft mit TranslateY() in Betracht ziehen:

#abc {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Nach dem Login kopieren

Wichtige Hinweise:

Transformationsbasierte Ausrichtung ist begrenzt Browserübergreifende Unterstützung.
Stellen Sie sicher, dass das Element eine definierte Position hat, z. B. relativ oder absolut, damit die Transformationspositionierung wirksam wird.

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

Vorheriger Artikel：Wie kann ich CSS-Stile basierend auf Bildschirmgröße und Gerät steuern? Nächster Artikel：Was ist der Unterschied zwischen CSS-Margin und Padding?

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Aktuelle Ausgaben