CSS text-align Eigenschaft

Die CSS-Eigenschaft text-align legt die horizontale Ausrichtung des Inline-Inhalts innerhalb eines Block-Containers fest. Vereinfacht gesagt steuert sie, wie Text (und Inline-Elemente wie <a>, <img> oder <span>) innerhalb seines übergeordneten Rahmens positioniert wird: an den linken Rand gedrückt, an den rechten Rand, zentriert oder gestreckt, um die Zeile zu füllen.

Diese Seite behandelt die Syntax, jeden Wert mit seiner genauen Wirkung, ausführbare Beispiele, häufige Fallstricke und den Unterschied zwischen text-align und der Zentrierung eines Blocks selbst.

Warum text-align nicht dasselbe ist wie einen Block zu zentrieren

Eine häufige Quelle der Verwirrung: text-align: center zentriert den Inhalt innerhalb eines Blocks, nicht den Block innerhalb seines übergeordneten Elements. Die Eigenschaft richtet Inline-Inhalte relativ zu dem Block aus, der sie enthält — sie verschiebt den Block selbst nicht in Bezug auf sein umgebendes Element oder den viewport.

Um ein Block-Element (beispielsweise ein <div> mit fester Breite) horizontal zu zentrieren, geben Sie ihm eine Breite und verwenden stattdessen automatische horizontale Außenabstände — siehe die Eigenschaft margin. Verwenden Sie text-align, wenn Sie den Text innerhalb eines Elements positionieren möchten; verwenden Sie margin: 0 auto, wenn Sie das Element selbst positionieren möchten.

Info

Die mit text-align festgelegte Ausrichtung bezieht sich nicht auf den umgebenden Block oder den viewport — sie positioniert Inline-Inhalte innerhalb des eigenen Blocks.

Standardwert	left, wenn direction "ltr" ist; right, wenn direction "rtl" ist
Gilt für	Block-Container.
Vererbbar	Ja
Animierbar	Nein.
Version	CSS1
DOM-Syntax	object.style.textAlign = "right";

Syntax

Syntax der CSS-Eigenschaft text-align

text-align: left | right | center | justify | initial | inherit;

Beispiel der text-align-Eigenschaft mit den Werten "right" und "center":

Beispiel der CSS-Eigenschaft text-align mit den Werten right und center

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        text-align: right;
      }
      p {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Text-align property example</h2>
    <div>Example for the text-align property.</div>
    <p>Some paragraph for example.</p>
  </body>
</html>

Probier es selbst »

Ergebnis

Beispiel der text-align-Eigenschaft mit den Werten "center", "left" und "justify":

Beispiel der CSS-Eigenschaft text-align mit den Werten left, center und justify

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2 {
        text-align: center;
      }
      p.date {
        text-align: left;
      }
      p.example {
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <h2>Text-align property example</h2>
    <p class="date">March, 2019</p>
    <p class="example">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </body>
</html>

Probier es selbst »

Bei justify wird jede Zeile außer der letzten gestreckt, sodass linke und rechte Kante mit den Rändern des Rahmens bündig sind; der Browser fügt zusätzliche Abstände zwischen den Wörtern ein, um dies zu erreichen. Deshalb sieht justify bei breiten, mehrzeiligen Absätzen am besten aus und kann in schmalen Spalten unschöne Lücken erzeugen.

Werte

Die Eigenschaft text-align akzeptiert die folgenden Werte:

Wert	Beschreibung	Ausprobieren
left	Richtet den Text linksbündig aus. Dies ist der Standardwert dieser Eigenschaft.	Ausprobieren »
right	Richtet den Text rechtsbündig aus.	Ausprobieren »
center	Richtet den Text zentriert aus.	Ausprobieren »
justify	Streckt die Zeilen so, dass jede Zeile die gleiche Breite hat.	Ausprobieren »
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.	Ausprobieren »
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Hinweise und häufige Fallstricke

Wirkt nur auf Inline-Inhalte. text-align hat keine Auswirkung auf ein untergeordnetes Block-Element, das nicht inline ist. Um einen Block horizontal zu positionieren, geben Sie ihm eine Breite und verwenden margin: 0 auto oder ein Flex-/grid-Layout.
Wird vererbt. Da die Eigenschaft vererbt wird, kaskadiert text-align: center auf <body> auf alle Nachkommen, bis etwas es überschreibt. Setzen Sie die Eigenschaft möglichst am spezifischsten Element, um unerwartete Effekte zu vermeiden.
Berücksichtigt die Schreibrichtung. Der Standardwert hängt von direction ab: left für linksbündigen (ltr) Text und right für rechtsbündigen (rtl) Text. Die logischen Werte start und end beziehen sich unabhängig von der Richtung auf den Anfang bzw. das Ende der Zeile.
Bilder zentrieren. Da <img> ein Inline-Element ist, zentriert text-align: center am übergeordneten Block auch das Bild — praktisch für schnelles Zentrieren von Bildern ohne Flexbox.
justify und die letzte Zeile. justify streckt die letzte Zeile eines Absatzes nie; diese behält die natürliche Startausrichtung. Steuern Sie sie separat mit text-align-last.

Übung

Welche der folgenden Werte sind gültige Eigenschaftswerte für die Eigenschaft 'text-align' in CSS?