CSS, HTML und Javascript mit {stil}

CSS vertical-align

CSS vertical-align Ausrichten

vertical-align richtet Bilder und Texte in Tabellenzellen und Texten an einer Grundlinie aus. Diese Grundlinie – baseline – wird anhand eines Textes oder einer Linie bestimmt.

vertical-align ist für die Ausrichtung von Inline-Elementen gedacht und nicht für die Positionierung von Blockelementen.

Zusammen mit display:table-cell kann vertical-align:middle Text und Bildern in Blockelementen zentrieren.

HTML und CSS bieten viele Eigenschaften für das horizontale Verhalten und die Breite. Wenn es um das vertikale Verhalten und die Höhe von Elementen geht, sind HTML und CSS wenig intuitiv.

In Texten richtet vertical-align eine Gruppe von Zeichen relativ zur Grundlinie des Text aus. In Tabellenzellen richtet vertical-align Inhalte anhand der oberen oder unteren Grenze der Zelle aus.

In Tabellenzellen
middle | bottom | text-bottom
Im Text
sub | super | top | text-top
percentage | length

Der Werte top, middle und bottom sind für Tabellenzellen vorgesehen.
vertical-align sub, super, text-top, text-bottom wird für Ausrichtung in Textboxen verwendet.

CSS vertical-align in Tabellenzellen

top middle bottom
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin tincidunt, odio nec sodales mattis, ... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. ... Lorem ipsum dolor sit amet, consectetuer. ...
   td { vertical-align: top; }
   td { vertical-align: middle; }
   td { vertical-align: bottom; }

Vertikal zentrierten

Mit CSS display: table-cell lassen sich Inhalte in Blockelementen – z.B. in div-Tags – vertikal ausrichten. So lassen sich Inhalte innerhalb von Block-Tags vertikal zentrieren, auch wenn ihre Höhe nicht bekannt ist.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin tincidunt, odio nec sodales mattis

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin tincidunt, odio nec sodales mattis

<div style="display:table-cell; vertical-align:middle">
…
</div>

vertical-align für Text

Bemerkung: text-top und text-bottom waren bei Firefox 2 vertauscht.

Mit vertical-align: baseline auf der Grundlinie
Mit vertical-align: sub unter der Grundlinie
Mit vertical-align: super über der Grundlinie
Die obere Grenze von vertical-align: text-top liegt unter der x-Höhe des Textes
Die untere Grenze von vertical-align: text-bottom liegt über der x-Höhe des Textes
Mit vertical-align: -15% um ein paar Prozent tiefergestellt
Mit vertical-align: 10px um ein paar Pixel höher gestellt

CSS vertical-align für Bilder

Bild an der Oberkante des Textes ausrichten: Ist nicht dasselbe wie style: float, denn mit vertical-align belegt das Bild weiterhin eine Zeile.