CSS text-align – Texte ausrichten: mittig, links, rechts, Blocksatz

Mit der CSS Eigenschaft text-align ist es möglich, Texte auszurichten. Ausrichten heißt, an den linken oder rechten Rand, zentriert in der Mitte oder als Blocksatz.

Wie du dies mit CSS machst, erfährst du in diesem CSS Eigenschaften Tutorial.

Syntax zu CSS text-align

text-align: right;

Wir können auf jedes Blockelement die text-align anwenden. Diese wirkt sich jedoch nur auf Text aus. Das Ausrichten von Elementen kann man unter anderem mit der CSS float Eigenschaft vornehmen.

Die Besonderheit bei der text-align CSS Eigenschaft ist der Blocksatz.
Alle Buchstaben bekommen dafür einen eigenen Abstand, der bei einer Zeile immer der gleiche ist. Anders als bei CSS letter-spacing, bestimmt CSS/Browser selbst, welchen Abstand jedes Zeichen bekommt, damit: der Text vom linken bis zum rechten Rand voll ausgefüllt wird. Ähnlich wie bei einem Zeitungsartikel.

Wichtig bei der text-align Eigenschaft ist zudem, dass es nur auf Blockelemente angewendet werden kann!

Beispiele für text-align

1. Rechts ausrichten:

text-align: right;

1. Rechts ausgerichteter Text – Beispiel

2. Mittig ausrichten:

text-align: center;

2. Mittig ausgerichteter Text – Beispiel

3. Blocksatz Ausrichtung

text-align: justify;

3. Blocksatz ausgerichteter Text – Beispiel

Informationen und Werte

Vererbbar: ja
Initialwert: im Normal “left" (linksbündig)
Anwendbar: nur auf Blockelemente
Werte: left (Linksbündig), right (rechtsbündig), center (mittig ausrichten), justify (Blocksatz), inherit (Vererbung)