So positionieren Sie Webelemente mit CSS Vertical Align

Google-Suche









Landschaft
Beschreibung






Wald

Lorem ipsum dolor sit amet.






Ozean

Lorem ipsum dolor sit amet.

Das HTML Quelltext oben erstellt eine einfache Webseite, die vier Elemente anzeigt: verknüpften Text, ein Bild, ein eingebettetes Video und eine Tabelle. In Ihrem Browser sollte es so aussehen:

So richten Sie Text vertikal aus

Standardmäßig sind die meisten Textelemente (wie Überschriften,

, und

Einige Textelemente wie z und -Tag sind inline. Dadurch unterstützen sie die Eigenschaft vertical-align. Um Text vertikal auszurichten, weisen Sie einfach der CSS-Eigenschaft vertical-align den entsprechenden Wert zu.

Verwenden des vertikal ausgerichteten oberen Werts für Text

a {
 vertikale Ausrichtung: oben;
}

Hinzufügen der CSS-Code oben an das Basis-HTML-Dokument wird die Oberseite des ausrichten Tag-Text mit der Spitze des höchsten Elements in der Zeile. Produzieren der folgenden aktualisierten Anzeige:

Verwenden des Prozentwerts für Text

a {
 vertikale Ausrichtung: -50 %;
}

Das obige CSS richtet das Textelement an einer Position aus, die 50 % unter der Grundlinie des übergeordneten Elements liegt. Es erzeugt die folgende Ausgabe in Ihrem Browser:

Wie Sie im obigen Bild sehen können, nimmt das Textelement eine Position unter den Bild- und Videoelementen ein, die sich in derselben Zeile befinden. Um dieses Element an oder über der Grundlinie zu positionieren, verwenden Sie einen positiven Prozentwert.

Verwenden des Längenwerts für Text

a {
 vertikale Ausrichtung: 90px;
}

Der obige Code richtet die Grundlinie des Textelements bei einer Länge von 90 Pixel über der Grundlinie des übergeordneten Elements aus. Dies erzeugt die folgende Ausgabe in einem Browser:

So richten Sie Bilder vertikal aus

Das tag ist ein Inline-Element, mit dem die CSS-Eigenschaft vertical-align gut funktioniert.

Verwenden des vertikalen Ausrichtungs-Superwerts für Bilder

img {
 vertikale Ausrichtung: super;
}

Der obige Code positioniert das Bild an der hochgestellten Grundlinie des übergeordneten Elements. Dies bedeutet an einer Position über der Grundlinie, wie Sie in der folgenden Ausgabe sehen können:

Verwenden des Prozentwerts für die vertikale Ausrichtung von Bildern

img {
 vertikale Ausrichtung: 25 %;
}

Der obige Code richtet die Grundlinie des Bildelements 25 % über der Grundlinie des übergeordneten Elements aus. Dadurch ergibt sich folgender Spiegeleffekt des Superwertes:

Verwenden des Längenwerts für die vertikale Ausrichtung von Bildern

img {
 vertikale Ausrichtung: 5px;
}

Der obige Code richtet die Grundlinie des Bildelements an einer Position aus, die 5 Pixel über der Grundlinie des übergeordneten Elements liegt. Dies erzeugt einen ähnlichen Effekt wie die Super- und 25%-Werte:

Eingebettete Medien wie Videos und Iframes sind Inline-HTML-Elemente. Daher funktioniert die CSS-Eigenschaft vertical-align hervorragend mit ihnen.

Verwenden des Superwerts für die vertikale Ausrichtung in einem Video

Video {
 vertikal ausrichten: sub;
}

Der obige Code positioniert das Video an der tiefgestellten Grundlinie des übergeordneten Elements. Dies bedeutet an einer Position unterhalb der Grundlinie, wie Sie in der folgenden Ausgabe sehen können:

Verwenden des Prozentwerts für die vertikale Ausrichtung in einem Video

Video {
 vertikale Ausrichtung: -25 %;
}

Der obige Code richtet die Grundlinie des Videoelements 25 % unter der Grundlinie des übergeordneten Elements aus. Dies erzeugt den folgenden Spiegeleffekt des Subwerts:

Verwenden des Längenwerts für die vertikale Ausrichtung in einem Video

Video {
 vertikale Ausrichtung: -5px;
}

Der obige Code richtet die Grundlinie des Bildelements an einer Position aus, die 5 Pixel unter der Grundlinie des übergeordneten Elements liegt. Dies erzeugt einen Effekt wie die Werte sub und -25%:

So richten Sie Elemente in einer Tabelle vertikal aus

Die Verwendung der Eigenschaft vertical-align mit einer Tabelle ist etwas knifflig, da eine Tabelle ein Blockelement ist. Allerdings ist die

Verwenden des vertikal ausgerichteten oberen Werts für Tabellendaten

td {
 Höhe: 40px;
 vertikale Ausrichtung: oben;
}

Der obige Code fügt jeder Zelle in der Tabelle eine Höhe von 40 Pixel hinzu. Anschließend werden die Daten in jeder Zelle am oberen Rand jeder Zeile ausgerichtet. Dies erzeugt die folgende Ausgabe im Browser:

Verwenden des vertikalen Mittelwerts für Tabellendaten

td {
 Höhe: 40px;
 vertikale Ausrichtung: Mitte;
}

Der mittlere Wert für die vertikale Ausrichtung im obigen Code zentriert die Daten vertikal in jeder Zelle. Es erzeugt die folgende Ausgabe im Browser:

Verwenden des vertikal ausgerichteten unteren Werts für Tabellendaten

td {
 Höhe: 40px;
 vertikal ausrichten: unten;
}

Der obige Code richtet die Daten in jeder Zelle am unteren Rand jeder Zeile aus. Es erzeugt die folgende Ausgabe im Browser:

Jetzt können Sie die Elemente auf Ihrer Webseite ausrichten

Sie können jetzt die CSS-Eigenschaft vertical-align mit einer Vielzahl verschiedener Inline-Elemente verwenden, darunter Text, eingebettete Medien und Tabellendaten. Als allgemeine Regel gilt, dass die Eigenschaft vertical-align nur bei Inline- und Inline-Block-Elementen funktioniert.

Sie können diese Eigenschaft jedoch für Blockelemente verwenden, Sie müssen sie nur zuerst in Inline- oder Inline-Block-Elemente konvertieren. Denken Sie daran, dass Sie vertical-align mit anderen Ausrichtungseigenschaften wie text-align kombinieren können.

Über den Autor

Kadeisha Kean (52 veröffentlichte Artikel)

Kadeisha Kean ist ein Full-Stack-Softwareentwickler und technischer/Technologie-Autor. Sie hat die ausgeprägte Fähigkeit, einige der komplexesten technologischen Konzepte zu vereinfachen; Material zu produzieren, das von jedem Technologieneuling leicht verstanden werden kann. Sie schreibt leidenschaftlich gerne, entwickelt interessante Software und bereist die Welt (durch Dokumentarfilme).

Mehr von Kadeisha Kean