Workshops zu CSSScalable Vector GraphicsBilderwandWeb ServicesWeblog

"vertical-align"

H ALLOSCARHALLOSCARHALLOSCAR


Hier ist ein Text, der mal nach oben, und mal nach unten geht. Damit lassen sich schon einige Effekte erzielen.

Z.B ein Text, der langsam nach unten rutscht.

Oder auch schneller seinem Ziel entgegen strebt. Natürlich kann er auch wieder hochrutschen.


Wie das gemacht ist: ganz einfach. Der weitgehend unbekannte Style "vertical-align" legt fest, wieweit oberhalb oder (mit - Zeichen versehen) unterhalb der Schriftlinie ein Buchstabe, Wort angeordnet werden soll. Damit kann man auch mit CSS höher und tiefer stellen, und zwar punkt- bzw. pixelgenau.

Gut kann man mit vertical-align Bilder unterschiedlicher Höhe ausrichten. Mögliche Werte sind:
baseline | sub | super | top | text-top | middle | bottom | text-bottom | .
Voreinstellung ist baseline (Grundlinie)

Besitzer älterer Browser sehen hier nichts, aber "vertical-align" funktioniert ab IE 5.0 (so habe ich das gelesen, aber mit meinem IE 5.5 funktioniert es nicht!!!) Netscape 6.0, Opera 6.0 und Mozilla 0.9.9. Eigentlich sollten alle modernen Browser ab der 5er Generation das darstellen können, denn "vertical-align" gehört zum CSS1 Standard, zur Zeit wird bereits an CSS3 gearbeitet.

Und damit die ausgeschlossenen Besitzer älterer Browser auch sehen, was ihnen entgeht, ist hier noch ein Screenshot:

Vertical-align