CSS: Wie zentriere ich Text vertikal in einem div? (oder andere Elemente, die keine Tabelle sind)

Question

Um Text vertikal in einer Tabellenzelle auszurichten, verwende ich vertical-align: middle in td.

Aber das oben genannte funktioniert nicht mit Divs, Spannen, Header und anderen Nicht-Tabellenelementen. Wie kann ich Text in solchen Elementen vertikal ausrichten?

Answer 1

Es gibt viele Möglichkeiten, jede mit ihren Vor- und Nachteilen.

Hier ist ein good article von Douglas Heriot erklärt 5 andere Methoden und vergleicht sie.

Answer 2

Verwenden Sie einfach die folgende Art:

<style type="text/css"> 
    div { 
      vertical-align: middle; 
      display: table-cell; 
     } 
</style> 

Auf diese Weise Sie „Anzeigen“ die div als Tabellenzelle und da vertical-align Arbeiten mit Tabellenzellen, sind Sie Text Mittelpunkt vertikal sein wird ausgerichtet.

Answer 3

Wenn es sich um eine einzelne Textzeile handelt, können Sie die Zeilenhöhe auf die gleiche Höhe wie das Element einstellen.