Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.

View in EnglishAlways switch to English

vertical-align

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

Dievertical-alignCSS Eigenschaft legt die vertikale Ausrichtung einer Inline-, Inline-Block- oder Tabellenzellen-Box fest.

Probieren Sie es aus

vertical-align: baseline;

vertical-align: top;

vertical-align: middle;

vertical-align: bottom;

vertical-align: sub;

vertical-align: text-top;

<section>  <p>    Align the star:    <img src="/shared-assets/images/examples/star2.png" />  </p></section>

#default-example > p {  line-height: 3em;  font-family: monospace;  font-size: 1.2em;  text-decoration: underline overline;}

Die Eigenschaftvertical-align kann in zwei Kontexten verwendet werden:

Um die Box eines Inline-Elements vertikal innerhalb seiner enthaltenden Zeilenbox auszurichten. Zum Beispiel könnte sie verwendet werden, umein Bild in einer Textzeile vertikal zu positionieren.
Umden Inhalt einer Zelle in einer Tabelle vertikal auszurichten.

Beachten Sie, dassvertical-align nur für Inline-, Inline-Block- und Tabellenzellen-Elemente gilt: Es kann nicht verwendet werden, umBlock-Elemente vertikal auszurichten.

Syntax

css

/* Keyword values */vertical-align: baseline;vertical-align: sub;vertical-align: super;vertical-align: text-top;vertical-align: text-bottom;vertical-align: middle;vertical-align: top;vertical-align: bottom;/* <length> values */vertical-align: 10em;vertical-align: 4px;/* <percentage> values */vertical-align: 20%;/* Global values */vertical-align: inherit;vertical-align: initial;vertical-align: revert;vertical-align: revert-layer;vertical-align: unset;

Die Eigenschaftvertical-align wird als einer der unten aufgeführten Werte angegeben.

Werte für Inline-Elemente

Eltern-relative Werte

Diese Werte richten das Element relativ zu seinem Elternelement vertikal aus:

baseline: Richtet die Grundlinie des Elements an der Grundlinie seines Elternteils aus. Die Grundlinie einigerersetzter Elemente, wie zum Beispiel<textarea>, ist durch die HTML-Spezifikation nicht definiert, was bedeutet, dass ihr Verhalten mit diesem Schlüsselwort zwischen Browsern variieren kann.
sub: Richtet die Grundlinie des Elements an der Tiefststellungs-Grundlinie seines Elternteils aus.
super: Richtet die Grundlinie des Elements an der Hochstellungs-Grundlinie seines Elternteils aus.
text-top: Richtet die Oberseite des Elements an der Oberseite der Schriftart des Elternelements aus.
text-bottom: Richtet die Unterseite des Elements an der Unterseite der Schriftart des Elternelements aus.
middle: Richtet die Mitte des Elements an der Grundlinie plus der halben x-Höhe des Elternteils aus.
<length>: Richtet die Grundlinie des Elements in der angegebenen Länge über der Grundlinie seines Elternteils aus. Ein negativer Wert ist erlaubt.
<percentage>: Richtet die Grundlinie des Elements in dem angegebenen Prozentsatz über der Grundlinie seines Elternteils aus, wobei der Wert ein Prozentsatz derline-height Eigenschaft ist. Ein negativer Wert ist erlaubt.

Linien-relative Werte

Die folgenden Werte richten das Element relativ zur gesamten Linie vertikal aus:

top: Richtet die Oberseite des Elements und seiner Nachkommen an der Oberseite der gesamten Linie aus.
bottom: Richtet die Unterseite des Elements und seiner Nachkommen an der Unterseite der gesamten Linie aus.

Für Elemente, die keine Grundlinie haben, wird stattdessen der untere Rand berücksichtigt.

Werte für Tabellenzellen

baseline (undsub,super,text-top,text-bottom,<length>, und<percentage>): Richtet die Grundlinie der Zelle an der Grundlinie aller anderen Zellen in der Zeile aus, die an der Grundlinie ausgerichtet sind.
top: Richtet den oberen Auffüllungsrand der Zelle an der Oberseite der Zeile aus.
middle: Zentriert die Auffüllungsbox der Zelle innerhalb der Zeile.
bottom: Richtet den unteren Auffüllungsrand der Zelle an der Unterseite der Zeile aus.

Negative Werte sind erlaubt.

Formale Definition

Anfangswert	`baseline`
Anwendbar auf	Inline- und table-cell Elemente. Auch anwendbar auf`::first-letter` und`::first-line`.
Vererbt	Nein
Prozentwerte	bezieht sich auf die`line-height` des Elements selbst
Berechneter Wert	für Prozentwerte und Längenwerte die absolute Länge, ansonsten das Schlüsselwort wie angegeben
Animationstyp	Längenangabe

Formale Syntax

vertical-align =
[first|last]||
<'alignment-baseline'>||
<'baseline-shift'>

<alignment-baseline> =
baseline|
text-bottom|
alphabetic|
ideographic|
middle|
central|
mathematical|
text-top

<baseline-shift> =
<length-percentage>|
sub|
super|
top|
center|
bottom

<length-percentage> =
<length>|
<percentage>

Beispiele

Einfaches Beispiel

HTML

html

<div>  An <img src="frame_image.svg" alt="link" width="32" height="32" /> image with  a default alignment.</div><div>  An  <img src="frame_image.svg" alt="link" width="32" height="32" />  image with a text-top alignment.</div><div>  An  <img src="frame_image.svg" alt="link" width="32" height="32" />  image with a text-bottom alignment.</div><div>  An  <img src="frame_image.svg" alt="link" width="32" height="32" />  image with a middle alignment.</div>

CSS

css

img.top {  vertical-align: text-top;}img.bottom {  vertical-align: text-bottom;}img.middle {  vertical-align: middle;}

Ergebnis

Vertikale Ausrichtung in einer Zeilenbox

HTML

html

<p>top:         <img src="star.png" alt="star"/>middle:      <img src="star.png" alt="star"/>bottom:      <img src="star.png" alt="star"/>super:       <img src="star.png" alt="star"/>sub:         <img src="star.png" alt="star"/></p><p>text-top:    <img src="star.png" alt="star"/>text-bottom: <img src="star.png" alt="star"/>0.2em:       <img src="star.png" alt="star"/>-1em:        <img src="star.png" alt="star"/>20%:         <img src="star.png" alt="star"/>-100%:       <img src="star.png" alt="star"/></p>

#* {  box-sizing: border-box;}img {  margin-right: 0.5em;}p {  height: 3em;  padding: 0 0.5em;  font-family: monospace;  text-decoration: underline overline;  margin-left: auto;  margin-right: auto;  width: 80%;}

Ergebnis

Vertikale Ausrichtung in einer Tabellenzelle

In diesem Beispiel haben wir eine Tabelle mit einer einzigen Zeile, die sechs Zellen enthält. Die Zeile setztvertical-align aufbottom als Standardwert.

Die ersten vier Zellen setzen jeweils ihre eigenenvertical-align Werte, und diese überschreiben den Wert der Zeile.
Die fünfte Zelle setzt keinen eigenenvertical-align Wert, sodass sie den Wert der Zeile erbt.

Die sechste Zelle wird nur verwendet, um sicherzustellen, dass die Zellen hoch genug sind, um den Effekt zu sehen.

HTML

html

<table>  <tbody>    <tr>      <td>baseline</td>      <td>top</td>      <td>middle</td>      <td>bottom</td>      <td>Row's style</td>      <td>        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse        pretium felis eu sem mattis vulputate.      </td>    </tr>  </tbody></table>

CSS

css

table {  margin-left: auto;  margin-right: auto;  width: 80%;}table,th,td {  border: 1px solid black;}td {  padding: 0.5em;  font-family: monospace;}.bottom {  vertical-align: bottom;}.baseline {  vertical-align: baseline;}.top {  vertical-align: top;}.middle {  vertical-align: middle;}