Heim  >  Artikel  >  Web-Frontend  >  Was bedeutet vertikale Ausrichtung? Wie benutzt man?

Was bedeutet vertikale Ausrichtung? Wie benutzt man?

不言
不言Original
2019-04-12 14:29:519282Durchsuche

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.

Das Vertical-Alignment-Attribut hat viele Werte:

Was bedeutet vertikale Ausrichtung? Wie benutzt man?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:

Dieser Artikel ist hier. Weitere spannende Inhalte finden Sie in der Spalte

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:Wie verwende ich CSS-Sprites?Nächster Artikel:Wie verwende ich CSS-Sprites?