Ü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 |
| Animierbar | Nein |
| 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, fallsdirectionltrist undright, fallsdirectionrtlist. end- Dasselbe wie
right, fallsdirectionltrist undleft, fallsdirectionrtlist. 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
inheritmit dem Unterschied, dass die Wertestartundendin Bezug auf diedirectiondes Elternelements berechnet werden und durch den passendenleftoderrightWert ersetzt werden.
Formale Syntax
start | end | left | right | center | justify | match-parent | start end
Beispiele
Livebeispiele
p { background:gold; width:22em; }
noch etwas Inlineinhalt...p { background:gold; width:22em; margin: 1em auto; }
noch etwas Inlineinhalt...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 Level 1 Die Definition von 'text-align' in dieser Spezifikation. |
Bearbeiterentwurf | Keine Änderungen |
| CSS Text 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
| Merkmal | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
Grundlegende Unterstützung (left, right, center und justify) |
1.0 | 1.0 (1.7 oder früher) | 3.0 | 3.5 | 1.0 (85) |
| Blockausrichtungswerte | 1.0-webkit | 1.0 (1.7 oder früher)-moz[1] | Nicht unterstützt | Nicht unterstützt | 1.0 (85)-khtml 1.3 (312)-webkit [1] |
start |
1.0 | 1.0 (1.7 oder früher) | Nicht unterstützt | (Ja) | 3.1 (525) |
end |
1.0 | 3.6 (1.9.2) | Nicht unterstützt | (Ja) | 3.1 (525) |
match-parent |
16 | 40 (40) | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt |
| Merkmal | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
Grundlegende Unterstützung (left, right, center und justify) |
? | ? | ? | ? | ? | ? |
| Blockausrichtungswerte | ? | ? | ? | ? | ? | ? |
start |
? | ? | ? | ? | ? | ? |
end |
? | ? | ? | ? | ? | ? |
match-parent |
? | ? | 40.0 (40) | ? | ? | ? |
[1] WebKit und Gecko unterstützen eine Version mit Präfix von left, center und right, die nicht nur für Inlineinhalte gilt, sondern auch für Blockelemente. Dies wird dazu verwendet, das veraltete align Attribut bei manchen tabellenbezogenen Elementen zu implementieren. Diese sollten nicht auf produktiven Webseiten verwendet werden.