Wie richtet man Text innerhalb eines Div vertikal aus?

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;
}

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;
}

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%);
}

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!