| vertical-align: |  |      |
|
|
 HOME |
 ZURÜCK SITEMAP |
Hier gehts um die vertikale Ausrichtung von Elementen in Bezug auf Text. Daher erkläre ich erst einmal die Grundlage dazu: Die 4 Ausrichtungslinien
Aus der Typografie  In der Typografie hat ein Text vier Bezugslinien (Ausrichtungslinien):
Die Basislinie definiert die Linie, auf der die Buchstaben liegen. Die Grundlinie (Textunterkante) wird durch die Buchstaben bestimmt, die nach unten über die Basislinie hinausragen (Beispiel: g j p q), Buchstaben mit Unterlängen also. Vertikale Elementausrichtung zum Text Werden Text und ein weiteres Seitenelement (z.B. eine Grafik) nebeneinander angeordnet, kann man das Element an den Bezugslinien des Textes ausrichten. Text <img style="vertical-align: xxxx" src="image.gif" width="20" ...
Zur Erklärung zeige ich hier 5 Grafiken ohne weiteren Kommentar:
     Demo 01 Die Zeilenhöhe wurde hier durch das große vorangestellete 'Happy' erzwungen! Wie sie nachfolgend feststellen, bezieht sich hier die vertikale Formatierung der Grafik auf den der Grafik folgenden Text. Die Plazierung mit den Angaben 'top' und 'bottom' sollten sich allerdings auf die gesamte Zeilenhöhe (grau) beziehen. Nach eigenen Erfahrungen weichen diese beiden Positionierungen browserabhängig ab. (Schauen sie auch weiter unten Demo 02) screenshot: 
Ansicht in ihrem Browser: Happy  Dayvertical-alignment für die Grafik: bottom Happy Dayvertical-alignment für die Grafik: top Happy Dayvertical-alignment für die Grafik: text-bottom Happy Dayvertical-alignment für die Grafik: baseline Happy Dayvertical-alignment für die Grafik: middle Happy Dayvertical-alignment für die Grafik: text-top Überlegungen und Beobachtungen Lassen sie sich nicht verunsichern wenn das Ergebnis nicht ihren Erwartungen entspricht.
 Demo 02 
Wie gesagt, nicht irritieren lassen oder verzweifeln. Betrachten sie doch einmal das Ergbnis der Anzeige in den letzten beiden grünen Tabellenzeilen (vertical-align:top + vertical-align:text-top). Die Textzeilen wurden gelb formatiert.
 Anzeige im FireFox 1.5 - Info einblenden / ausblenden Anzeige im Internet Explorer 6 - Info einblenden / ausblendenAnzeige in ihrem Browser (hier in 70px hohen,grünen Tabellenzellen):
| |||||||||||||||||||||||||||
|
11) Alignment
