CSS vertical-align

CSS vertical align, Inhalt vertikal ausrichten

vertical-align richtet Bilder und Texte in Tabellenzellen und Texten an einer Grundlinie aus. Die Grundlinie oder Baseline ist eine unsichtbare Linie, auf der die meisten Buchstaben einer Zeile sitzen. vertical-align ist für die Ausrichtung von Inline-Elementen gedacht und nicht für die Positionierung von Blockelementen.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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;
}
In Tabellenzellen
middle | bottom | text-bottom | top
Im Text
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

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

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.

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>

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

frucht

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.

Zeichnung CSS Grundlinie, x-linie, line-height
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

vertical 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.
vertical-ballonsDie 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>