Wie richtet man Text innerhalb eines Div vertikal aus?-CSS-Tutorial-php.cn

How to Vertically Align Text Within a Div?

Vertikale Ausrichtung von Text innerhalb eines

In der Webentwicklung ist es oft notwendig, Text innerhalb eines

vertikal auszurichten. div> Element. Um dies zu erreichen, stehen mehrere Lösungen zur Verfügung.

Line-Height verwenden:

Eine einfache Methode ist die Verwendung der Eigenschaft line-height. Indem Sie die Zeilenhöhe auf denselben Wert wie die Höhe von

einstellen, wird der Text automatisch vertikal in der Mitte ausgerichtet.

Beispiel:

#abc {
  line-height: 50px;
}

Nach dem Login kopieren

Hinweis: Diese Methode funktioniert nur, wenn sich darin eine einzelne Textzeile befindet

Verwenden von Display:Table und Display:Table-Cell:

Für mehrere Textzeilen besteht eine vielseitigere Lösung in der Verwendung von display:table und Anzeige: Tabellenzelleneigenschaften. Bei dieser Methode wird der Text in ein -Format eingeschlossen. und Einstellungsanzeige: Tabellenzelle und vertikale Ausrichtung: Mitte.

Beispiel:

#abc {
  display: table;
}

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

Nach dem Login kopieren

Transformationseigenschaft verwenden:

Eine weitere Alternative besteht darin, die Transformationseigenschaft mit der Funktion TranslateY() zu verwenden. Dazu gehört, die Position des Elements auf absolut zu setzen, es 50 % von oben zu positionieren und es von seiner Achse um -50 % zu verschieben.

Beispiel:

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

Nach dem Login kopieren

Hinweis:Diese Methode wird möglicherweise nicht von älteren Browsern wie IE8 unterstützt.

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

Quelle：php.cn

Vorheriger Artikel：Wie zentriere ich ein DIV horizontal und vertikal, ohne den Inhalt abzuschneiden? Nächster Artikel：Sollten Sie den CSS Star Selector für eine bessere Leistung und Wartbarkeit meiden?

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