CSS Grundlagen: So kannst du Text ausrichten • horizontal Text-Ausrichtung mit Text-Align

EnglishDisplay this page in English

CSS Property text-align – Text ausrichten

Die CSS-Eigenschaft text-align dient der Ausrichtung von Text und Inline-Elementen. Mit text-align kann auch ein Bild zentriert werden. Dies funktioniert allerdings nur dann, wenn sich das Bild in einem Block-Element befindet, z.B. in einem ein div.

CSS-Eigenschaft: Text-Align
Beschreibung mögliche Werte Standardwert Kategorie
Textausrichtung left
right
center
justify
initial
inherit		 left Textdarstellung
Text

Die Angabe in oranger Schrift ist die Standardanwendung der CSS-Eigenschaft text-align.

Beachte:

  1. Die Eigenschaft text-align wirkt nur in Block-Elementen.

    • left richtet den Text linksbündig aus.

    • right richtet den Text rechtsbündig aus.

    • center zentriert den Text horizontal.

    • justify richtet den Text im Blocksatz aus.

  3. Vermeide die Textausrichtung justify (Blocksatz), da unterschiedlich große Leerräume zwischen den Wörtern die Lesbarkeit des Textes beeinträchtigen.

  4. initial erzwingt die Wiederherstellung der ursprünglichen Textausrichtung, d.h. der Wert initial stellt für die Eigenschaft text-align die Standard-Textausrichtung ein. Für westliche Sprachen ist das left für linksbündig.

  5. inherit erzwingt die Vererbung der Textausrichtung vom übergeordneten Element.

Beispiel 
p {
  text-align: left;
}

h1 {
  text-align: center;
}

h2, h3 {
  text-align: left;
}