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