Ü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.
Initialwert | start 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 auf | Blockcontainer |
Vererbt | Ja |
Medien | visuell |
Berechneter Wert | wie 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 |
Animationstyp | diskret |
Kanonische Reihenfolge | Reihenfolge 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
, fallsdirection
ltr
ist undright
, fallsdirection
rtl
ist. end
- Dasselbe wie
right
, fallsdirection
ltr
ist undleft
, fallsdirection
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 Wertestart
undend
in Bezug auf diedirection
des Elternelements berechnet werden und durch den passendenleft
oderright
Wert ersetzt werden.
Formale Syntax
start | end | left | right | center | justify | match-parent
Beispiele
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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
text-align | Chrome Vollständige Unterstützung 1 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 1 | IE Vollständige Unterstützung 3 | Opera Vollständige Unterstützung Ja | Safari Vollständige Unterstützung 1 | WebView Android Vollständige Unterstützung ≤37 | Chrome Android Vollständige Unterstützung 18 | Firefox Android Vollständige Unterstützung 4 | Opera Android Vollständige Unterstützung Ja | Safari iOS Vollständige Unterstützung 1 | Samsung Internet Android Vollständige Unterstützung Ja |
Prefixed center , left , and right values for block alignment | Chrome
Vollständige Unterstützung
1
| Edge Keine Unterstützung Nein | Firefox
Vollständige Unterstützung
1
| IE Keine Unterstützung Nein | Opera
Vollständige Unterstützung
15
| Safari
Vollständige Unterstützung
1.3
| WebView Android
Vollständige Unterstützung
37
| Chrome Android
Vollständige Unterstützung
18
| Firefox Android
Vollständige Unterstützung
4
| Opera Android ? | Safari iOS
Vollständige Unterstützung
1
| Samsung Internet Android ? |
Flow-relative values start and end | Chrome Vollständige Unterstützung 1 | Edge Keine Unterstützung Nein | Firefox Vollständige Unterstützung 1 | IE Keine Unterstützung Nein | Opera Vollständige Unterstützung 15 | Safari Vollständige Unterstützung 3.1 | WebView Android Vollständige Unterstützung 37 | Chrome Android Vollständige Unterstützung 18 | Firefox Android Vollständige Unterstützung 4 | Opera Android ? | Safari iOS Vollständige Unterstützung 2 | Samsung Internet Android ? |
justify-all | Chrome Keine Unterstützung Nein | Edge Keine Unterstützung Nein | Firefox Keine Unterstützung Nein | IE Keine Unterstützung Nein | Opera Keine Unterstützung Nein | Safari Keine Unterstützung Nein | WebView Android Keine Unterstützung Nein | Chrome Android Keine Unterstützung Nein | Firefox Android Keine Unterstützung Nein | Opera Android Keine Unterstützung Nein | Safari iOS Keine Unterstützung Nein | Samsung Internet Android Keine Unterstützung Nein |
match-parent | Chrome Vollständige Unterstützung 16 | Edge Keine Unterstützung Nein | Firefox Vollständige Unterstützung 40 | IE Keine Unterstützung Nein | Opera Vollständige Unterstützung 15 | Safari Keine Unterstützung Nein | WebView Android Vollständige Unterstützung 37 | Chrome Android Vollständige Unterstützung 18 | Firefox Android Vollständige Unterstützung 40 | Opera Android ? | Safari iOS Keine Unterstützung Nein | Samsung Internet Android ? |
Character-based alignment in a table column (<string> value) | Chrome Keine Unterstützung Nein | Edge Keine Unterstützung Nein | Firefox Keine Unterstützung Nein | IE Keine Unterstützung Nein | Opera Keine Unterstützung Nein | Safari Keine Unterstützung Nein | WebView Android Keine Unterstützung Nein | Chrome Android Keine Unterstützung Nein | Firefox Android Keine Unterstützung Nein | Opera Android ? | Safari iOS Keine Unterstützung Nein | Samsung Internet Android ? |
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.