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-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 class="default-example" id="default-example">
  <p>
    Align the star:
    <img id="example-element" 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 vertical-align Eigenschaft kann in zwei Kontexten verwendet werden:

Um die Box eines Inline-Elementes vertikal innerhalb seiner umgebenden Zeilenbox auszurichten. Zum Beispiel kann 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 angewendet wird: Sie können es nicht verwenden, um Block-Level-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 aufgeführten Werte angegeben.

Werte für Inline-Elemente

Elternal-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 <textarea>, ist im HTML-Standard nicht spezifiziert, was bedeutet, dass ihr Verhalten mit diesem Schlüsselwort zwischen Browsern variieren kann.
sub: Richtet die Grundlinie des Elements mit der Tiefstellungs-Grundlinie seines Elternteils aus.
super: Richtet die Grundlinie des Elements mit der Hochstellungs-Grundlinie 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 der halben x-Höhe des Elternteils aus.
<length>: Richtet die Grundlinie des Elements auf die angegebene Länge über der Grundlinie seines Elternteils aus. Ein negativer Wert ist zulässig.
<percentage>: Richtet die Grundlinie des Elements auf den angegebenen Prozentsatz über der Grundlinie seines Elternteils aus, wobei der Wert einen Prozentsatz der line-height Eigenschaft darstellt. Ein negativer Wert ist zulässig.

Zeilen-relative Werte

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

top: Richtet die Oberkante des Elements und seiner Nachkommen mit der Oberkante der gesamten Zeile aus.
bottom: Richtet die Unterkante des Elements und seiner Nachkommen mit der Unterkante der gesamten Zeile 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 basislinien-ausgerichteten Zellen in der Zeile aus.
top: Richtet die obere Polsterrandkante der Zelle mit der Oberkante der Zeile aus.
middle: Zentriert die Polsterbox der Zelle innerhalb der Zeile.
bottom: Richtet die untere Polsterrandkante der Zelle mit der Unterkante 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

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 einer Zeilenbox

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>

#* {
  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 setzt vertical-align als Standardwert auf bottom.

Die ersten vier Zellen setzen ihre eigenen Werte für vertical-align, die die Wert der Zeile überschreiben.
Die fünfte Zelle setzt keinen vertical-align Wert, so wird der Wert der Zeile vererbt.

Die sechste Zelle wird nur verwendet, um sicherzustellen, dass die Zellen hoch genug sind, um den Effekt 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
CSS Inline Layout Module Level 3 # propdef-vertical-align

Browser-Kompatibilität

BCD tables only load in the browser