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

364 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

Neueste Artikel des Autors

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

2927

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

3118

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

2548

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...