CSS Grundlagen: Alles Wissenswerte über Text-Align – Tipps und Tricks für die Ausrichtung deiner Texte

English

Text ausrichten: CSS Eigenschaft Text-Align

Die CSS-Eigenschaft text-align wird verwendet, um Text und Inline-Elemente auszurichten. Mit text-align können auch Bilder zentriert werden. Dies funktioniert aber nur, 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;
}