text-align: Textausrichtung
Anzeige Hier werben
Werte:left, right, center, justify, start, end, string
Standardwert:left, wenn direction "ltr" ist; right, wenn "rtl"; start ab CSS3
Vererbung: ja
Kurzschreibweise: -
Anwendbar auf: alle Blockelemente, Tabellenzellen und Inline-Block-Elemente
CSS-Level:CSS1, CSS2.1, CSS3
Durch die Eigenschaft text-align kann die Textausrichtung in Blöcken festgelegt werden.
Die Standardwerte hängen von der Schriftrichtung ab. In der westlichen Welt ist diese meist von links nach rechts (left to right) und durch den Standardwert von direction werden Texte normalerweise linksbündig dargestellt. Im Arabischen ist die Schriftrichtung beispielsweise von rechts nach link (right to left), so dass die Textausrichtung hier rechtsbündig ist.
Eine abweichende Textausrichtung kann natürlich auch für optische Effekte eingesetzt werden.
Fehlerhafte Verwendung
Früher war es im Kompartibilitätsmodus einiger Browser möglich mit dieser Eigenschaft Blockelemente zu zentrieren. Davon sollte abgesehen werden und stattdessen die Eigenschaft margin benutzt werden. Im Standardmodus funktioniert dies auch nicht mehr.
Werte
| Eigenschaft |
Bedeutung |
Anmerkung |
left |
links |
|
right |
rechts |
|
center |
Text horizontal zentriert | |
justify |
Text im Blocksatz | |
start |
Text immer zu der Seite ausgerichtet, an der er beginnt | CSS3 |
end |
Text immer zu der Seite ausgerichtet, an der er aufhört | CSS3 |
string |
CSS3 |
Die Werte left, right, center und justify werden von allen gängigen Browser unterstützt.
start, end
In CSS3 kommen die Schriftrichtungsabhängigen Werte start und end hinzu. Beim Wert start ist der , bei end dort wo er aufhört. Somit lassen sich in Abhängigkeit von der Schriftrichtung Texte positionieren.
Beispiel
1
2
3
4
5
6
7
8
9 | <p style="text-align: right; width: 200px; border:1px black solid;">
Ein Absatz, in dem der Text rechtsbündig angezeigt wird.
</p>
<p style="text-align: center; width: 200px; border:1px black solid;">
Zentriert
</p>
<p style="text-align: justify; width: 200px; border:1px black solid;">
Hier noch ein Text im Blocksatz. Damit man das besser sieht, ziehe ich den Absatz durch nonsense künstlich in die Länge
</p>
|
- CSS3 Wert "string" fehlt. Spezifikationen dazu.
- Ein kleines Bild dazu
- Kompatibilität von Safari,ff2,op9?
Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 2 Personen an der Seite "text-align: Textausrichtung" mitgewirkt.
Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "text-align: Textausrichtung" hier bearbeiten.
-
Student der Biochemie und seit einigen Jahren im Hobby-Entwicklerbereich tätig. Stärken in XHTML/CSS und PHP, alles was mit Grafik zu tun hat, gehört nicht dazu.
-
arbeitet seit längerem als Webdesigner und vor allem -entwickler. Er ist Webmaster von Webmasterpro.de und leitet den Flashcounter-Service.