text-align

Die CSS Eigenschaft text-align egt die horizontale Ausrichtung eines Blockelements oder eines Tabellenzellenrahmens fest. Dies bedeutet, dass sie wie vertical-align funktioniert, jedoch in horizontaler Richtung.

Syntax

/* Keyword values */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;

/* Character-based alignment in a table column */
text-align: ".";
text-align: "." center;

/* Block alignment values (Non-standard syntax) */
text-align: -moz-center;
text-align: -webkit-center;

/* Global values */
text-align: inherit;
text-align: initial;
text-align: unset;

Die Eigenschaft text-align wird auf eine der folgenden Arten angegeben:

Werte

start
Dasselbe wie left, falls direction ltr ist und right, falls direction rtl ist.
end
Dasselbe wie right, falls direction ltr ist und left, falls direction rtl ist.
left
Die Inlineinhalte werden am linken Rand (linksbündig) der Zeilenbox ausgerichtet.
right
Die Inlineinhalte werden am rechten Rand (rechtsbündig) der Zeilenbox ausgerichtet.
center
Die Inlineinhalte werden innerhalb der Zeilenbox zentriert.
justify
Der Text wird im Blocksatz angeordnet. Text sollte seinen linken und rechten Rand bündig am linken und rechten Rand des Absatzinhalts ausrichten.
justify-all
Dasselbe wie justify, erzwingt jedoch, dass die letzte Zeile ebenfalls im Blocksatz angeordnet wird.
match-parent
Ähnlich zu inherit mit dem Unterschied, dass die Werte start und end in Bezug auf die direction des Elternelements berechnet werden und durch den passenden left oder right Wert ersetzt werden.
<string>
Gibt bei Anwendung auf eine Tabellenzelle das Zeichen an, um das der Inhalt der Zelle ausgerichtet wird.

Bedenken zur Zugänglichkeit

Der inkonsistente Abstand zwischen den Wörtern, der durch einen gerechtfertigten Text entsteht, kann für Menschen mit kognitiven Problemen wie Legasthenie problematisch sein.

Formale Definition

Initialwertstart oder ein namenloser Wert, der sich wie left verhält, falls direction den Wert ltr hat, right, falls direction den Wert rtl hat, falls start nicht vom Browser unterstützt wird.
Anwendbar aufBlockcontainer
VererbtJa
Berechneter Wertwie angegeben, außer für den match-parent Wert, welcher in Bezug auf den direction Wert des Elternelements berechnet wird und einen berechneten Wert von left oder right ergibt
Animationstypdiskret

Formale Syntax

start | end | left | right | center | justify | match-parent

Beispiele

Linksbündig

HTML

<p class="example">
  Integer elementum massa at nulla placerat varius.
  Suspendisse in libero risus, in interdum massa.
  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>

CSS

.example {
  text-align: left;
  border: solid;
}

Ergebnis

Zentriert

HTML

<p class="example">
  Integer elementum massa at nulla placerat varius.
  Suspendisse in libero risus, in interdum massa.
  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>

CSS

.example {
  text-align: center;
  border: solid;
}

Ergebnis

Blocksatz

HTML

<p class="example">
  Integer elementum massa at nulla placerat varius.
  Suspendisse in libero risus, in interdum massa.
  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>

CSS

.example {
  text-align: justify;
  border: solid;
}

ergebnis

Hinweis

Der Standard-kompatible Weg, einen Block selbst zu zentrieren, ohne seinen Inline-Inhalt zu zentrieren, ist z.B. das Setzen der linken und rechten margin auf auto, z.B..:

.something {
  margin: auto;
}
.something {
  margin: 0 auto;
}
.something {
  margin-left: auto;
  margin-right: auto;
}

Spezifikationen

Spezifikation Status Kommentar
CSS Logical Properties and Values Level 1
Die Definition von 'text-align' in dieser Spezifikation.
Bearbeiterentwurf Keine Änderungen
CSS Text Module Level 4
Die Definition von 'text-align' in dieser Spezifikation.
Bearbeiterentwurf Fügt den Wert <string> hinzu.
CSS Text Module Level 3
Die Definition von 'text-align' in dieser Spezifikation.
Arbeitsentwurf Fügt die start, end und match-parent Werte hinzu. Ändert den unbenannten Initialwert zu start (der er war).
CSS Level 2 (Revision 1)
Die Definition von 'text-align' in dieser Spezifikation.
Empfehlung Keine Änderungen
CSS Level 1
Die Definition von 'text-align' in dieser Spezifikation.
Empfehlung Ursprüngliche Definition

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
text-alignChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 3Opera Vollständige Unterstützung 3.5Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung ≤37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 10.1Safari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung 1.0
Prefixed center, left, and right values for block alignment
VeraltetNicht standardisiert
Chrome Vollständige Unterstützung 1
Mit Präfix
Vollständige Unterstützung 1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Vollständige Unterstützung 79
Mit Präfix
Vollständige Unterstützung 79
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Vollständige Unterstützung 1
Mit Präfix
Vollständige Unterstützung 1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
IE Keine Unterstützung NeinOpera Vollständige Unterstützung 15
Mit Präfix
Vollständige Unterstützung 15
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Safari Vollständige Unterstützung 1.3
Mit Präfix
Vollständige Unterstützung 1.3
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Vollständige Unterstützung 1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -khtml-
WebView Android Vollständige Unterstützung 37
Mit Präfix
Vollständige Unterstützung 37
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Chrome Android Vollständige Unterstützung 18
Mit Präfix
Vollständige Unterstützung 18
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Android Vollständige Unterstützung 4
Mit Präfix
Vollständige Unterstützung 4
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
Opera Android Vollständige Unterstützung 14
Mit Präfix
Vollständige Unterstützung 14
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Safari iOS Vollständige Unterstützung 1
Mit Präfix
Vollständige Unterstützung 1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Vollständige Unterstützung 1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -khtml-
Samsung Internet Android Vollständige Unterstützung 1.0
Mit Präfix
Vollständige Unterstützung 1.0
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Flow-relative values start and endChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 79Firefox Vollständige Unterstützung 1IE Keine Unterstützung NeinOpera Vollständige Unterstützung 15Safari Vollständige Unterstützung 3.1WebView Android Vollständige Unterstützung 37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 14Safari iOS Vollständige Unterstützung 2Samsung Internet Android Vollständige Unterstützung 1.0
justify-allChrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Keine Unterstützung NeinIE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinFirefox Android Keine Unterstützung NeinOpera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein
match-parentChrome Vollständige Unterstützung 16Edge Vollständige Unterstützung 79Firefox Vollständige Unterstützung 40IE Keine Unterstützung NeinOpera Vollständige Unterstützung 15Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 40Opera Android Vollständige Unterstützung 14Safari iOS Keine Unterstützung NeinSamsung Internet Android Vollständige Unterstützung 1.0
Character-based alignment in a table column (<string> value)
Experimentell
Chrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Keine Unterstützung NeinIE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinFirefox Android Keine Unterstützung NeinOpera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Experimentell. Das Verhalten kann sich zukünftig ändern.
Experimentell. Das Verhalten kann sich zukünftig ändern.
Nicht standardisiert. Erwarte schlechte browserübergreifende Unterstützung.
Nicht standardisiert. Erwarte schlechte browserübergreifende Unterstützung.
Veraltet. Nicht für den Einsatz in neuen Webseiten gedacht.
Veraltet. Nicht für den Einsatz in neuen Webseiten gedacht.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.

Siehe auch