Heim > Artikel > Web-Frontend > Was bedeutet vertikale Ausrichtung? Wie benutzt man?
Was bedeutet vertikale Ausrichtung? Wie benutzt man?
- 不言Original
- 2019-04-12 14:29:519266Durchsuche
vertikal-align ist eine Eigenschaft in CSS, die verwendet werden kann, um die vertikale Ausrichtung von Elementen festzulegen. Schauen wir uns die Verwendung der Vertical-align-Eigenschaft genauer an. Das Attribut „vertikal-align“ definiert die vertikale Ausrichtung der Grundlinie eines Inline-Elements relativ zur Grundlinie der Zeile, in der sich das Element befindet. Ermöglicht die Angabe negativer Längenwerte und Prozentwerte. Dadurch wird das Element abgesenkt, anstatt es anzuheben. In Tabellenzellen legt diese Eigenschaft die Ausrichtung des Zellinhalts im Zellfeld fest.
baseline: Standard. Das Element wird auf der Grundlinie des übergeordneten Elements platziert.
Sub: Der Index von vertikal ausgerichtetem Text.
super: Richten Sie den hochgestellten Text vertikal aus.
top: Richten Sie den oberen Rand des Elements am oberen Rand des höchsten Elements in der Zeile aus.
text-top: Ausrichten die Oberseite des Elements mit der Oberseite des übergeordneten Elements. Obere Ausrichtung der Elementschriftart
Mitte: Platzieren Sie dieses Element in der Mitte des übergeordneten Elements.
unten: Richten Sie die Oberseite des Elements an der Oberseite des untersten Elements in der Reihe aus.
text-bottom: Richten Sie den unteren Rand des Elements am unteren Rand der Schriftart des übergeordneten Elements aus.
Länge:
%: Verwenden Sie den Prozentwert des „line-height“-Attributs, um dieses Element anzuordnen. Negative Werte sind erlaubt.
inherit: Gibt an, dass der Wert des Vertical-Align-Attributs vom übergeordneten Element geerbt werden soll.
Zum Beispiel:
Vertikal oben ausrichten bedeutet, den oberen Rand des Textes vertikal auszurichten.In der Tabelle legt dieses Attribut die Ausrichtung des Zellinhalts fest. Vertical-align wird in td am häufigsten verwendet, um die Position interner Objekte zu steuern.
Sehen wir uns ein konkretes Beispiel an: <html>
<head>
<style type="text/css">
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}
</style>
</head>
<body>
<p>
这是一幅<img class="top" border="0" src="/i/eg_cute.gif" />位于段落中的图像。
</p>
<p>
这是一幅<img class="bottom" border="0" src="/i/eg_cute.gif" />位于段落中的图像。
</p>
</body>
</html>Der Operationseffekt ist wie folgt:
CSS-Video-Tutorial
auf der chinesischen PHP-Website! ! !Das obige ist der detaillierte Inhalt vonWas bedeutet vertikale Ausrichtung? Wie benutzt man?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!