CSS Grundlagen: Text-Align für Einsteiger – Tipps und Tricks zur richtigen Ausrichtung deiner Texte

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.

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

  3. 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.

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

Beispiel
p {
  text-align: left;
}

h1 {
  text-align: center;
}

h2, h3 {
  text-align: left;
}