text-align

Übersicht

Die CSS Eigenschaft text-align beschreibt, wie Inlineinhalte wie Text in ihrem Elternblockelement ausgerichtet werden. text-align steuert nicht die Ausrichtung von Blockelementen selbst, nur deren Inlineinhalte.

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
Medienvisuell
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
Kanonische ReihenfolgeReihenfolge des Auftretens in der formalen Grammatik der Werte

Syntax

/* Schlüsselwortwerte */
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;

/* Globale Werte */
text-align: inherit;
text-align: initial;
text-align: unset;

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 der Zeilenbox ausgerichtet.
right
Die Inlineinhalte werden am rechten Rand der Zeilenbox ausgerichtet.
center
Die Inlineinhalte werden innerhalb der Zeilenbox zentriert.
justify
Der Text wird im Block 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 Block 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.

Formale Syntax

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

Beispiele

Live-Beispiel ansehen

Livebeispiele

div { text-align: center; border:solid; }

p { background:gold; width:22em; }

noch etwas Inlineinhalt...
div { text-align: center; border:solid; }

p { background:gold; width:22em; margin: 1em auto; }

noch etwas Inlineinhalt...
div { text-align:-moz-center; text-align:-webkit-center; border:solid; }

p { background:gold; width:22em; }

noch etwas Inlineinhalt...

Hinweise

Der Standardweg, um einen Block ohne seinen Inlineinhalt zu zentieren, ist das Setzen seines linken und rechten margin auf auto, e.g.:
margin: auto; oder margin: 0 auto; oder 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 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 JaSafari 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 JaSafari 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 Keine Unterstützung NeinFirefox 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 ? 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 Keine Unterstützung NeinFirefox 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 ? Safari 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 Keine Unterstützung NeinFirefox 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 ? Safari 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 ? Safari 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
Kompatibilität unbekannt  
Kompatibilität unbekannt
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

Verwandte Themen