Horizontale Ausrichtung: text-align
Diese Eigenschaft gibt es seit Version: CSS 1
Mittels text-align
kann man die Ausrichtung des Textes in horizontaler Richtung innerhalb von Blockelementen bestimmen. Die Standardeinstellung ist dabei die linksbündige Ausrichtung »left«, was im Web auch am besten lesbar ist. Möglich ist natürlich auch rechtsbündige oder zentrierte Anordnung sowie Blocksatz.
Seit CSS 2 kann in Tabellenspalten außerdem eine Ausrichtung an einem »String« erfolgen. In CSS 2.1 wird diese Möglichkeit aber voraussichtlich wieder entfernt werden, zumal sie bisher von keinem Browser unterstützt wird.
Code-Beispiel für text-align
:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Beispiel für die horizontale Ausrichtung</title> <style type="text/css"> .linksbuendig {text-align: left;} .rechtsbuendig {text-align: right;} .zentriert {text-align: center;} .blocksatz {text-align: justify;} td {text-align: ","} </style> </head> <body> <p class="linksbuendig">Dieser Absatz ist linksbündig ausgerichtet.</p> <p class="rechtsbuendig">Dieser Absatz ist rechtsbündig ausgerichtet.</p> <p class="zentriert"> Dieser Absatz ist zentriert.</p> <p class="blocksatz">Dieser Absatz ist im Blocksatz gesetzt. Damit man das auch sieht, ist der Text hier etwas länger.</p> <table> <tr> <td>21,24 EUR</td> </tr> <tr> <td>434,56 EUR</td> </tr> <tr> <td>3256,65 EUR</td> </tr> <tr> <td>3,89 EUR</td> </tr> </table> </body> </html>
Initialwert: | Abhängig vom Browser und von direction |
Vererbbar: | Ja |
Anwendbar auf: | Block-Elemente |
Medium: | Visual |
Werte: |
|
Anmerkung: der IE hat einen Bug, so dass nicht nur Text innerhalb von Blockelementen zentriert wird, sondern gleich das gesamte Blockelement selbst, wenn »text-align: center« verwendet wird.
Wert | |||||||||||||||
5 | 5.5 | 6 | MAC 5+ | 5 | 6 | 7+ | 8 | 4 | 6 | 7+ | 1+ | 0.8+ | 1.0+ | 3.3+ | |
left, right, center, justify | j | j | j | j | j | j | j | j | j | j | j | j | j | j | j |
Ausrichtung per »string« in Tabellen | n | n | n | n | n | n | n | n | n | n | n | n | n | n | n |