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.

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.

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

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

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.

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>