Stil mit {stil}

Feb 2007

text-align • Ausrichtung von Texten

text-align richtet Texte und andere Inline-Elemente wie Bilder innerhalb eines Blockelements rechtsbündig, linksbündig, zentriert oder im Blocksatz aus. Die Vorgabe ist linksbündiger Text.

<div style="text-align: center">
   <img src="bild.gif" width="62" height="100" alt="bild.gif" />
</div>

Blockelemente hingegen sollen durch text-align nicht ausgerichtet werden – text-align kann also Layout-Elemente einer Webseite nicht in der Mitte des Browserfensters positionieren (eine korrekte Technik, um Block-Elemente in einem Block zu zentrieren, bietet die CSS-Eigenschaft margin).

Da aber text-align erblich ist, erben Inline-Elemente unterhalb eines Elements, für das text-align notiert ist, den Wert einer text-align-Regel.

<div style="text-align: center;">
   <div>Blockelement innerhalb eines eines Blockelements</div>
</div>

Internet Explorer richtet – entgegen dem Standard – auch Block-Elemente innerhalb von Elementen, für die eine text-align-Regel notiert wurde, entsprechend aus.

• [ text-align ]
• letter-spacing
• text-decoration
• text-indent
• text-transform
• white-space
• word-spacing

text-align

IE4+ M1 N4+ O5+ Sa1 CSS1 Erblich: Ja

text-align

text-align richtet den Text aus.

Werte

left | right | center | justify | inherit

left

ist die Standardeinstellung: Text wird linksbündig ausgerichtet.

right

richtet den Text rechtsbündig aus.

center

zentriert Text mit gleichem Weißraum nach rechts und links.

justify

richtet Text im Blocksatz aus und fügt dafür zusätzlichen Weißraum zwischen Zeichen und Wörter ein. Da die Browser die Silbentrennung nur fragmentarisch beherrschen, werden Texte im Blocksatz auf dem Monitor mit großer Wahrscheinlichkeit unschöne Lücken aufweisen. Auch die weiche Silbentrennung, die durch ­ im Quelltext des HTML-Dokuments verwendet werden kann, wird noch nicht von allen Browsern erkannt.

zurück zum Seitenanfang