CSS, HTML und Javascript mit {stil}

CSS vertical-align

CSS vertical-align Ausrichten von Text und in Tabellenzellen

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

Die Grundlinie ist die untere Grenze der Kleinbuchstaben wie a oder b. Die x-Höhe ist die obere Grenze der Kleinbuchstaben wie a oder x.

Erklärung von Grundlinie und x-Höhe
Text mit vertical-align: baseline auf der Grundlinie
Text mit vertical-align: sub unter der Grundlinie
Text 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
Text mit vertical-align: -15% um ein paar Prozent tiefer gestellt
Text mit vertical-align: 10px um ein paar Pixel höher gestellt

CSS vertical-align für Bilder

Bild mit CSS vertical-align: text-top an der Oberkante von Text ausrichten Ein Bild mit vertical-align: text-top an der Oberkante des Textes ausrichten ist nicht dasselbe wie das vertikale Ausrichten mit float: left oder float: right, denn mit vertical-align belegt das Bild weiterhin eine Textzeile, mit float nicht.

<style>
img {
    vertical-align: text-top;
}
</style>

<p><img src="" … > Ein Bild mit vertical-align</p>
vertical-align Vertical align Grundlinie baseline 1em x-Höhe Typografie