Hier bist Du: Home » Texteigenschaften » vertical-align

Vertikale Ausrichtung: vertical-align

Diese Eigenschaft gibt es seit Version CSS 1

Die Eigenschaft vertical-align beeinflusst die vertikale Ausrichtung von Text in einer Zeile, bezogen auf das Elternelement, das ein Inline-Element sein muß. Man kann damit also kleineren Text an größerem Text oder auch an Grafiken ausrichten - nicht aber die vertikale Positionierung in einem Blockelement (z.B. div-Element) direkt bestimmen. Außerdem kann Text damit vertikal in Tabellenzellen positioniert werden. Der Normalwert ist dabei »baseline« - die Grundlinie.

Code-Beispiel für vertical-align:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
	"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
  <head> 
    <title>Die Eigenschaft
    vertical-align</title>
  <style type="text/css"> 
    .test { line-height: 2; font-size: 4em;}
    .test span {font-size: 0.3em;}
    .baseline {vertical-align: baseline;}
    .middle {vertical-align: middle;}
    .sub {vertical-align: super;}
    .text-top {vertical-align: text-top;}
    .text-bottom {vertical-align: text-bottom;}
    .percentage {vertical-align: 30%; }
    .length {vertical-align: 30px;}
    .top {vertical-align: top;}
    .bottom {vertical-align: bottom;}
    td {height:150px; }
  </style> 
  </head> 
  <body> 
    <div class="test">Gq
      <span class="baseline">baseline</span>

      <span class="middle">middle</span>
      <span class="sub">sub</span>
      <span class="super">super</span>
      <span class="text-top">text-top</span>

      <span class="text-bottom">text-bottom</span>
      <span class="percentage">30%</span>
      <span class="length">30px</span>
      <span class="top">top</span>

      <span class="bottom">bottom</span>
    </div>
    <div >
      <img src="testbild.gif" alt="testbild" width="50" eight="150">
      <span class="baseline">baseline</span>

      <span class="middle">middle</span>
      <span class="sub">sub</span>
      <span class="super">super</span>
      <span class="text-top">text-top</span>

      <span class="text-bottom">text-bottom</span>
      <span class="percentage">30%</span>
      <span class="length">30px</span>
      <span class="top">top</span>

      <span class="bottom">bottom</span>
    </div>
  <table>
      <tr>
        <td width="100"><

            p>Hier einfach mal ein
            wenig Text hin, um die Tabelle höher zu bekommen. Und noch ein
            wenig Text, damit die Tabelle zur Demonstration etwas höher
        wird.</p>
        </td>
        <td class="baseline">baseline</td>
        <td class="middle">middle</td>

        <td class="percentage">30%</td>
        <td class="length">30px</td>
        <td class="top">top</td>
        <td class="bottom">bottom</td>

      </tr>
  </table>
 </body> 
</html>

Beispiel ansehen

Initialwert: baseline
Vererbbar: Nein
Anwendbar auf: Inline-Elemente,
und Tabellenzellen
Medium: Visual
Werte:
sub
Tiefgestellt
super
Hochgestellt
baseline
An der Grundlinie ausrichten
top
Am oberen Rand des Elternelements
bottom
Am unteren Rand des Elternelements
middle
Mittig zwischen den oberen und unteren Rand des Elternelements
text-top
Am oberen Textrand
text-bottom
Am unteren Textrand
Längen- oder Prozentangabe
Eine positive oder negative Angabe verschiebt das Element über oder unter die Grundlinie.
Inherit
Prozentuale Werte: Beziehen sich auf Zeilenhöhe des Elements, für das vertical-align angegeben ist.

Anmerkung: Die Werte »sub«, »super», »text-top« und »text-bottom« gelten nicht in Tabellenzellen. Sie werden dann wie »baseline« behandelt.

Viele Browser verwechseln leider »sub« und »super«, ebenso wird »text-bottom« und »text-top« oft verwechselt. Diese Werte sind daher in der Praxis kaum einsetzbar. »top« und »bottom« werden dagegen durch die Bank sowie »text-bottom« und »text-top» gerendert, orientieren sich also an der Schriftgröße und nicht an der Schrifthöhe (line-height), was sie sollten.

Leider funktioniert auch das Ausrichten von Text an Bildern in kaum einem Browser so, wie es vom W3C vorgesehen ist. Insgesamt ist diese Eigenschaft also sehr fehlerbehaftet.

Wert Internet Explorer Opera Netscape Mozilla/ Seamonkey Mozilla Firefox Safari Konqueror
5 5.5 6 MAC 5+ 5 6 7 8 4 6 7+ 1+ 0.8+ 1.0+ 3.3+
Ausrichtung an Text
Längenangabe
n j j j j j j j n j j j j j j
Prozentangabe n j j j j j j j n j j j j j j
sub,super f f f f j j j j n f f f f f f
baseline j j j j j j j j j j j j j j j
top, bottom n f f f f f f f n f f f f f f
middle n j j j n j j n n j j j j j j
text-top, text-bottom n j j j f f f f n f f f f f f
Ausrichtung an Grafiken
Längen- oder Prozentangabe
n j j j j j j j n j j j j j j
sub,super f f j j j j j j n f f f f f f
baseline j j j j j j j j j j j j j j j
top, bottom n n n j j j j j n j j j j j j
middle n n n f n n n n n n n n n j j
text-top, text-bottom n n n n n n n n n n n n n n n
Ausrichtung in Tabellenzellen
Längen- oder Prozentangabe
n n n n n n n n n n n n n n n
middle, top, bottom j j j j j j j j j j j j j j j

zum Seitenanfang