Sie sind hier: Startseite -> HTML-Grundlagen -> Positionierung -> Valign

HTML-Grundlagen: valign

Valign und CSS: die vertikale Positionierung

So wie align für die horizontale Positionierung von Text und Elemente in HTML nicht mehr verwendet werden sollte, gilt dies auch für valign, das die vertikale Positionierung zum Thema hatte und technisch gesehen immer noch hat. Auch hier ist CSS die bessere Wahl der Mittel.

Zur Veranschaulichung gibt es nachstehend ein Beispiel für den Sinn von valign und wie dies in CSS gewerkstelligt werden kann.

Das ist die erste Zeile Das ist die zweite Zeile Das ist die dritte Zeile Dreizeiliger
Text
zur Demonstration.

Das Beispiel zeigt eine Tabelle mit einer Zeile und vier Spalten, wobei bewusst in der letzten Spalte dreizeiliger Fülltext gewählt wurde. Dadurch konnte ich Ihnen die Wirkungsweise von valign und ihren Hintergrund besser zeigen. Die erste Spalte ist so eingestellt, dass der Text gleich am Zeilenbeginn dargestellt wird (valign = top), die zweite Spalte ist das Gegenteil, nämlich die Einstellung valign=bottom und zeigt den Text am Ende der Zeile.

Und die dritte Spalte hätte gar keine Einstellung gebraucht, denn das vertikal zentrierte Verhalten, das hier auch zu sehen ist, ist standardmäßig eingestellt.

Nun ist es aber so, dass unter CSS diese Möglichkeiten und viele mehr zur Verfügung stehen. Wenn man eine Webseite betreibt, die viele Tabellen auf unterschiedlichen Seiten anbietet, macht es Sinn, mit Klassen zu arbeiten und jeder Klasse die nötigen Parameter in der CSS-Datei mitzugeben. Ein CSS-Aufruf würde nicht "valign=middle" heißen, sondern "vertical-align:middle;", die Funktionalität ist ansonsten sehr ähnlich.

Ebenfalls interessant:

Align

Informationen über die veraltete Positionierung in HTML mit align und die modernere Methode mit dem CSS-Befehl text-align.

[aktuelle Seite]

Valign

Informationen über den Parameter valign, mit dem man in HTML Text positionieren kann, der aber durch CSS ersetzt wurde.

DIV (Ebenen)

Informationen über den DIV-Tag, mit dem barrierefreie Spalten programmiert werden können.

Zurück zum Hauptthema

Übersicht Positionierung

Startseite HTML-Grundlagen