CSS-Eigenschaft vertical-align
Die Eigenschaft vertical-align legt die vertikale Ausrichtung eines Inline-, Inline-Block- oder Tabellenzellen-Elements fest. Zu den Inline-Elementen gehören Bilder, Text, Schaltflächen usw.
Diese Eigenschaft funktioniert nur in den folgenden Kontexten:
- Zum vertikalen Ausrichten von Inhalt innerhalb von Tabellenzellen (
<td>) und Elementen mitdisplay: table-cell. - Zum vertikalen Ausrichten des Kastens eines Inline-Elements innerhalb seines Zeilenkastens. Z. B. kann sie verwendet werden, um
<img>in einer Textzeile vertikal auszurichten.
Wir können die Eigenschaft vertical-align nicht verwenden, um Block-Elemente vertikal auszurichten. Hinweis: Sie zentriert keine Block-Kindelemente; verwenden Sie dafür margin: 0 auto oder Flexbox/Grid.
| Anfangswert | baseline |
|---|---|
| Gilt für | Inline-Elemente und Tabellenzellen-Elemente; gilt auch für ::first-letter und ::first-line. |
| Vererbt | Nein. |
| Animierbar | Nein. |
| Version | CSS1 |
| DOM-Syntax | object.style.verticalAlign = "middle"; |
Syntax
Syntax der CSS-Eigenschaft vertical-align
css
vertical-align: baseline | length | sub | super | top | text-top | middle | bottom | text-bottom | initial | inherit;Beispiel für die Eigenschaft vertical-align mit dem Wert "sub":
Beispiel der CSS-Eigenschaft vertical-align mit dem Wert sub
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
vertical-align: sub;
}
</style>
</head>
<body>
<h2>Vertical-align property example</h2>
<p>This is some paragraph with
<span>vertical-align</span> property.
</p>
</body>
</html>Ergebnis
Beispiel für die Eigenschaft vertical-align mit dem Wert "middle":
Beispiel der CSS-Eigenschaft vertical-align mit dem Wert middle
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
vertical-align: middle;
}
</style>
</head>
<body>
<h2>Vertical-align property example</h2>
<p>This is some paragraph with
<span>vertical-align</span> property.
</p>
</body>
</html>Beispiel für die Eigenschaft vertical-align mit dem Wert "super":
Beispiel der CSS-Eigenschaft vertical-align mit dem Wert super
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
vertical-align: super;
}
</style>
</head>
<body>
<h2>Vertical-align property example</h2>
<p>This is some paragraph with
<span>vertical-align</span> property.
</p>
</body>
</html>Beispiel für die Eigenschaft vertical-align mit den Werten "top" und "bottom":
Beispiel der CSS-Eigenschaft vertical-align mit den Werten top und bottom
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid #cccccc;
}
td {
height: 100px;
}
.top {
vertical-align: top;
}
.bottom {
vertical-align: bottom;
}
</style>
</head>
<body>
<h2>Vertical-align property example</h2>
<table>
<tr>
<th>Bottom</th>
<th>Middle</th>
<th>Top</th>
</tr>
<tr>
<td class="bottom">Some text</td>
<td>Some text</td>
<td class="top">Some text</td>
</tr>
</table>
</body>
</html>Werte
| Wert | Beschreibungen | Ausprobieren |
|---|---|---|
| baseline | Richtet die Grundlinie des Elements an der Grundlinie seines Elternteils aus. Dies ist ein Standardwert. | Ausprobieren » |
| length | Verschiebt die Grundlinie des Kastens relativ zur Grundlinie des Elternteils nach oben (positiver Wert) oder nach unten (negativer Wert). | Ausprobieren » |
| sub | Senkt die Grundlinie des Kastens auf die richtige Position für tiefgestellte Zeichen im Kasten des Elternteils. | Ausprobieren » |
| super | Hebt die Grundlinie des Kastens auf die richtige Position für hochgestellte Zeichen im Kasten des Elternteils an. | Ausprobieren » |
| top | Richtet die Oberkante des ausgerichteten Teilbaums an der Oberkante des Zeilenkastens aus. | Ausprobieren » |
| text-top | Richtet die Oberkante des Kastens an der Oberkante des Inhaltsbereichs des Elternteils aus. | Ausprobieren » |
| middle | Richtet die vertikale Mitte des Kastens an der Grundlinie des Elternkastens plus der halben x-Höhe des Elternteils aus. | Ausprobieren » |
| bottom | Richtet die Unterkante des ausgerichteten Teilbaums an der Unterkante des Zeilenkastens aus. | Ausprobieren » |
| text-bottom | Richtet die Unterkante des Kastens an der Unterkante des Inhaltsbereichs des Elternteils aus. | Ausprobieren » |
| initial | Dadurch verwendet die Eigenschaft ihren Standardwert. | Ausprobieren » |
| inherit | Es erbt die Eigenschaft vom Elternelement. |
Practice
What does the CSS 'vertical-align' property do?