vertical-align:
    
 Home • CSS • vertical-align   drucken  Seite drucken

 11) Alignment / Ausrichtung

01 02 03 04 05 06 07 08 09 10 11 12 13 14   CSS-Einführung

Hier gehts um die vertikale Ausrichtung von Elementen in Bezug auf Text und umgekehrt. Daher erkläre ich erst einmal die Grundlagen dazu, die aus der Typografie kommen.
vertikale Ausrichtung von Text


   Aus der Typografie

Die 4 Ausrichtungslinien


In der Typografie hat ein Text vier Bezugslinien (Ausrichtungslinien):
  • die Textoberkante (text-top)
  • die Mittellinie (middle)
  • die Basislinie (baseline)
  • die Textunterkante (text-bottom)
Zwei Bezugslinien sollte man nicht verwechseln:

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 vertikale Ausrichtung einer Grafik (neben einem Text), orientiert sich also an den Bezugslinien des Textes! Was aber, wenn sich zwei unterschiedlich hohe Texte in unmittelbarer Nachbarschaft der Grafik befinden?

Bei der Demo 01 werden zwei unterschiedlich hohe Texte, und eine kleine Grafik (violettes Kästchen) in einer Zeile nebeneinander dargestellt. Um den Unterschied von Text- und Zeilenhöhe zu verdeutlichen, habe ich den Hintergrund für den großen Text 'Happy' grau eingefärbt!



Die Zeilenhöhe wird durch den großen Text 'Happy' erzwungen! Wie Sie nachfolgend feststellen, bezieht sich hier die vertikale Formatierung der Grafik (violettes Kästchen) aber auf den Text 'Day', welcher der Grafik folgt.

Die Platzierung 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 Day

vertical-alignment für die Grafik: bottom



Happy Day

vertical-alignment für die Grafik: top



Happy Day

vertical-alignment für die Grafik: text-bottom



Happy Day

vertical-alignment für die Grafik: baseline



Happy Day

vertical-alignment für die Grafik: middle



Happy Day

vertical-alignment für die Grafik: text-top




   Überlegungen und Beobachtungen

Lassen Sie sich nicht verunsichern, wenn das Ergebnis nicht Ihren Erwartungen entspricht.
  • In einer Tabellenzelle orientiert sich 'bottom' 'top' am Zellenrand.
  • Auch die evtl. festgelegte Zeilenhöhe (line-height) hat einen Einfluss.
  • Das Verhältnis Texthöhe und Höhe der Grafik bedenken




   Demo 02

Wie gesagt, nicht irritieren lassen oder verzweifeln. Betrachten Sie doch einmal das Ergebnis der Anzeige in den letzten beiden grünen Tabellenzeilen (vertical-align:top + vertical-align:text-top). Die Textzeilen wurden gelb formatiert.


a  So sieht die Formatierung in anderen Browsern aus:

Klicken sie einen Link an, um die Darstellungen in anderen Browsern anzuzeigen.

 Anzeige im FireFox 1.5 - Info einblenden / ausblenden

 Anzeige im Internet Explorer 6 - Info einblenden / ausblenden





b  So sieht die aktuelle Formatierung in ihrem Browser aus:

Anzeige in ihrem Browser (hier in 70px hohen, grünen Tabellenzellen):

Happy Day  Happy Day  Happy Day 
vertical-alignment für beide Grafiken: bottom
Happy Day  Happy Day  Happy Day 
vertical-alignment für beide Grafiken: text-bottom
Happy Day  Happy Day  Happy Day 
vertical-alignment für beide Grafiken: baseline
Happy Day  Happy Day  Happy Day 
vertical-alignment für beide Grafiken: middle
Happy Day  Happy Day  Happy Day 
vertical-alignment für beide Grafiken: top
Happy Day  Happy Day  Happy Day 
vertical-alignment für beide Grafiken: text-top