vertical-align

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

• Um den Container eines Inline-Elements innerhalb seines umgebenden Linien-Containers vertikal auszurichten. Zum Beispiel könnte es verwendet werden, um ein Bild in einer Textzeile vertikal zu positionieren.
• Um den Inhalt einer Zelle in einer Tabelle vertikal auszurichten.

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.

/* 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.

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.

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.

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>  

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

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

Ergebnis

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>

#* {
  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

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

<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

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

• Typische Anwendungsszenarien von Flexbox, Abschnitt "Element zentrieren"
• line-height, text-align, margin
• Understanding vertical-align, or "How (Not) To Vertically Center Content"
• Vertical-Align: All You Need To Know