Sie sind hier: Startseite -> CSS-Grundlagen -> Absatzformatierung -> Vertikale Ausrichtung

CSS-Grundlagen: vertical-align

vertical-align: vertikale Ausrichtung des Textes

In HTML hatte man valign verwendet, um einen Text in der dargestellten Höhe manipulieren zu können. Das war zum Beispiel notwendig geworden, wenn in einem Formular die Beschriftung neben der Checkbox angebracht wurde, die aber meistens tiefer gestanden ist als das Kästchen, das die Besucherinnen und Besucher anklicken sollten.

Mit valign konnte man den Text höher ansetzen, doch ist der Nachteil dieser Technik, dass man jede Textpassage so ausstatten musste. Viel eleganter und praktischer ergo zeitsparender kann die Formatierung mit dem CSS-Befehl vertical-align erfolgen.

Beispieltext mit vertical-align:text-top als Einstellung.

Beispieltext mit vertical-align:text-bottom als Einstellung.

Beispieltext mit vertical-align:25% als Einstellung.

Beispieltext mit vertical-align:10px als Einstellung.

Beispieltext mit vertical-align:top als Einstellung.

Beispieltext mit vertical-align:bottom als Einstellung.

Beispieltext mit vertical-align:baseline als Einstellung.

Beispieltext mit vertical-align:middle als Einstellung.

Beispieltext mit vertical-align:sub als Einstellung.

Beispieltext mit vertical-align:super als Einstellung.

Im Ganzen gibt es zehn verschiedene Möglichkeiten, um den Text in seiner vertikalen Höhe via CSS zu manipulieren. Manche Möglichkeiten sind haben Ähnlichkeiten mit HTML-Tags wie zum Beispiel sub und super, denn des gibt den sub-Tag und den sup-Tag in HTML, aber im Gegensatz zu den Tags wird in CSS nicht die Schrift verkleinert. Dass man dies mit CSS zusätzlich einstellen könnte, versteht sich von selbst.

Und das ist mit ein Vorteil dieser Technik, weil man die volle Kontrolle hat, wie der Text im Absatz aussehen soll. Natürlich kann man nicht nur einen Teil des Textes so gestalten, es besteht auch die Möglichkeit, dem p-Tag, also dem Absatz, eine solche Einstellung zuzuweisen. Das kann im Rahmen einer Tabelle interessant sein, denn dort sind Tabelleninhalte oft verschieden lang und damit auch hoch.

Interessant ist weiters, dass CSS die Möglichkeit anbietet, mit Prozentwerten oder Pixelwerten zu arbeiten. Man ist also nicht auf fixe Vorgaben angewiesen, sondern ganz frei und individuell agieren.

Ebenfalls interessant:

Einzug

Informationen über den CSS-Befehl text-indent, mit dem die erste Zeile eines Absatzes via CSS eingezogen oder ausgerückt werden kann.

Zeilenumbruch

Informationen über den CSS-Befehl white-space, mit dem der Zeilenumbruch eingestellt werden kann.

Zeilenabstand

Informationen über den CSS-Befehl line-height, mit dem der Zeilenabstand in einem Text via CSS eingestellt werden kann.

[aktuelle Seite]

Vertikale Ausrichtung

Informationen über den CSS-Befehl vertical-align, mit dem Text auf einer Webseite vertikal angepasst werden kann.

Horiz. Ausrichtung

Informationen über die horizontale Ausrichtung mit CSS durch den CSS-Befehl text-align.

Zurück zum Hauptthema

Übersicht Absatzformatierung

Startseite CSS-Grundlagen