CSS-Basis-Tutorial

CSS-Boxmodell

CSS3Grund教程

CSS Referenzhandbuch

CSS @Regel (RULES)

CSS white-space (Leerraum)CSS line-height (Zeilenhöhe)

CSS vertikale-Align (vertikale Ausrichtung)

CSS vertikale-Die Eigenschaft der vertikalen Ausrichtung von align wird verwendet, um die vertikale Ausrichtung von eingebetteten oder Tabellenzellen-Boxen zu definieren. vertical-Align ist eine der wichtigen Eigenschaften von CSS. Für Anfänger kann es am Anfang schwer zu erlernen sein, am Ende des Artikels gibt es Beispiele, die Ihnen helfen, das Attribut schnell zu verstehen und zu beherrschen.

Was kann es tun

Es wird auf Inline- oder Inline-Block-Elemente angewendet.
Es beeinflusst die Ausrichtung des Elements, ohne den Inhalt zu beeinflussen. (Ausnahme: Tabellenzellen)
Wenn es auf Zellen der Tabelle angewendet wird, beeinflusst es den Inhalt der Zelle, nicht die Zelle selbst.

CSS vertikale-Verticalausrichtungswert der Ausrichtung

Wert	Beschreibung
Grundlinie	Es richtet die Baseline des Elements mit der Baseline des übergeordneten Elements aus. Dies ist der Standardwert.
length	Es wird verwendet, um die Länge des Elements um eine angegebene Länge zu erhöhen oder zu verringern. Negative Werte sind ebenfalls erlaubt.
%	Es wird verwendet, um das Element um einen Prozentsatz der Zeilenhöhe zu erhöhen oder zu verringern. Negative Werte sind erlaubt.
sub	Es ausrichtet das Element so, als wäre es ein Subscript.
super	Es ausrichtet das Element so, als wäre es ein Superscript.
top	Der obere Rand des Elements wird mit dem oberen Rand des höchsten Elements der Zeile ausgerichtet.
bottom	Der untere Rand des Elements wird mit dem niedrigsten Element der Zeile ausgerichtet.
text-top	Der obere Rand des Elements ist mit dem oberen Rand des Zeichens des übergeordneten Elements ausgerichtet.
middle	Das Element wird in der Mitte des übergeordneten Elements positioniert.
text-bottom	Der untere Rand des Elements ist mit dem unteren Rand des Zeichens des übergeordneten Elements ausgerichtet.
initial	Dieser Wert setzt diese Eigenschaft auf ihren Standardwert.
inherit	Diese Eigenschaft wird von ihrem übergeordneten Element geerbt.

CSS vertikale Ausrichtung Online Beispiel

Beispiel

<!DOCTYPE　html>　　
<html>　　
<head>　　
<style>　　
img.top　{　　
　　　　vertical-align:　text-top;　　
}　　
img.bottom　{　　
　　　　vertical-align:　text-bottom;　　
}　　
</style>　　
</head>　　
<body>　　
<p><img　src="/run/images/heart.jpg"　alt="Herzformiges Muster"/>　Dies ist ein Bild mit der Standardausrichtung.</p>　　　
<p><img　src="/run/images/heart.jpg"　style="vertical-align:　text-top;"　alt="Herzformiges Muster"/>　Dies ist ein Bild mit Texttopausrichtung.</p>　　　
<p><img　src="/run/images/heart.jpg"　style="vertical-align:　text-bottom;"　alt="Herzformiges Muster"/>　Dies ist ein Bild mit Textbodenausrichtung.</p>　　
</body>　　
</html>

Testen Sie heraus‹/›

Ausgabe：

Dies ist ein Bild mit der Standardausrichtung.

Dies ist ein Bild mit Texttopausrichtung.

Dies ist ein Bild mit Textbodenausrichtung.

CSS white-space (Leerraum)CSS line-height (Zeilenhöhe)