CSS vertical-align

Vertikal in Tabellen und im Fließtext

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, waren HTML und CSS vor dem Auftritt der Flexbox 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.

td, th {
	vertical-align: top;
}

middle | bottom | text-bottom | top

sub | super | top | text-top
percentage | length

Der Werte top, middle und bottom sind für Tabellenzellen vorgesehen. Die Vorgabe (default) ist middle.
vertical-align sub, super, text-top, text-bottom wird für Ausrichtung in Textblöcken verwendet.

CSS vertical-align in Tabellenzellen

td { vertical-align: top; }
td { vertical-align: middle; }
td { vertical-align: bottom; }

Vertikal zentrierten

Zusammen mit display:table-cell kann vertical-align:middle Text und Bildern in Blockelementen zentrieren. So lassen sich Inhalte innerhalb von Block-Tags vertikal zentrieren, auch wenn ihre Höhe nicht bekannt ist.

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

Die einfachste Methode für die vertikale Ausrichtung hat display: flex mitgebracht.

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

.flexbox {
	display: flex; 
	flex-direction: column; 
	justify-content:center;
}

Genauso gut ließe sich der Inhalt der Box am unteren Rand ausrichten: justify-content:flex-end anstelle von justify-content:center.

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.

CSS vertical-align für Bilder

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.

Die Katze im Ballon

Inken, Jinken und Nifft segelten einst an einem schönen Tag durch die kleinen Wolken hoch über den Alpen. Inken hatte seine Katze vergessen und kämpfte mit seinem schlechten Gewissen, denn noch vor wenigen Tagen hatte er ihr diesen Ausflug versprochen.

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

<p><img src="" … > Ein Bild mit vertical-align</p>