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 July 2015.

Die vertical-align CSS Eigenschaft legt die vertikale Ausrichtung eines Inline-, Inline-Block- oder Tabellenzellen-Containers fest.

Probieren Sie es aus

Die vertical-align Eigenschaft kann in zwei Kontexten verwendet werden:

Beachten Sie, dass vertical-align nur auf Inline-, Inline-Block- und Tabellenzellen-Elemente anwendbar ist: Sie können es nicht verwenden, um Block-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 vertical-align Eigenschaft wird als einer der unten aufgelisteten 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 mit der Grundlinie seines Elternteils aus. Die Grundlinie einiger ersetzter Elemente, wie z.B. <textarea>, ist nicht durch die HTML-Spezifikation festgelegt, was bedeutet, dass ihr Verhalten mit diesem Schlüsselwort zwischen Browsern variieren kann.

sub

Richtet die Grundlinie des Elements mit der Indexlinie seines Elternteils aus.

super

Richtet die Grundlinie des Elements mit der Hochgestellteschriftlinie seines Elternteils aus.

text-top

Richtet die Oberkante des Elements mit der Oberkante der Schrift des Elternelements aus.

text-bottom

Richtet die Unterkante des Elements mit der Unterkante der Schrift des Elternelements aus.

middle

Richtet die Mitte des Elements mit der Grundlinie plus die halbe 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 im angegebenen Prozentsatz über der Grundlinie seines Elternteils aus, wobei der Wert ein Prozentsatz der line-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 mit der Oberseite der gesamten Linie aus.

bottom

Richtet die Unterseite des Elements und seiner Nachkommen mit der Unterseite der gesamten Linie aus.

Für Elemente, die keine Grundlinie haben, wird stattdessen die untere Randkante verwendet.

Werte für Tabellenzellen

baseline (und sub, super, text-top, text-bottom, <length>, und <percentage>)

Richtet die Grundlinie der Zelle mit der Grundlinie aller anderen Zellen in der Zeile aus, die grundlinien-ausgerichtet sind.

top

Richtet die obere Innenkante der Zelle mit der Oberseite der Zeile aus.

middle

Zentriert den Innenabstandskasten der Zelle innerhalb der Zeile.

bottom

Richtet die untere Innenkante der Zelle mit der Unterseite der Zeile aus.

Negative Werte sind erlaubt.

Formale Definition

Initialer Wertbaseline
Anwendbar aufInline- und table-cell Elemente. Auch anwendbar auf ::first-letter und ::first-line.
VererbtNein
Prozentwertebezieht sich auf die line-height des Elements selbst
Berechneter Wertfür Prozentwerte und Längenwerte die absolute Länge, ansonsten das Schlüsselwort wie angegeben
AnimationstypLä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

Grundlegendes 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 class="top" src="frame_image.svg" alt="link" width="32" height="32" />
  image with a text-top alignment.
</div>
<div>
  An
  <img class="bottom" src="frame_image.svg" alt="link" width="32" height="32" />
  image with a text-bottom alignment.
</div>
<div>
  An
  <img class="middle" 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 einem Linien-Container

HTML

html
<p>
top:         <img style="vertical-align: top" src="star.png" alt="star"/>
middle:      <img style="vertical-align: middle" src="star.png" alt="star"/>
bottom:      <img style="vertical-align: bottom" src="star.png" alt="star"/>
super:       <img style="vertical-align: super" src="star.png" alt="star"/>
sub:         <img style="vertical-align: sub" src="star.png" alt="star"/>
</p>

<p>
text-top:    <img style="vertical-align: text-top" src="star.png" alt="star"/>
text-bottom: <img style="vertical-align: text-bottom" src="star.png" alt="star"/>
0.2em:       <img style="vertical-align: 0.2em" src="star.png" alt="star"/>
-1em:        <img style="vertical-align: -1em" src="star.png" alt="star"/>
20%:         <img style="vertical-align: 20%" src="star.png" alt="star"/>
-100%:       <img style="vertical-align: -100%" src="star.png" alt="star"/>
</p>

Ergebnis

Vertikale Ausrichtung in einer Tabellenzelle

In diesem Beispiel haben wir eine Tabelle mit einer einzigen Reihe, die sechs Zellen enthält. Die Zeile setzt vertical-align auf bottom als Standardwert.

  • Die ersten vier Zellen setzen jeweils ihre eigenen vertical-align Werte, und diese überschreiben den Wert der Zeile.
  • Die fünfte Zelle setzt keinen vertical-align Wert, sodass der Wert der Zeile geerbt wird.

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

HTML

html
<table>
  <tr class="bottom">
    <td class="baseline">baseline</td>
    <td class="top">top</td>
    <td class="middle">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>
</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;
}

Ergebnis

Spezifikationen

Specification
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification
# propdef-vertical-align

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch