vertical-align CSS-Eigenschaft

Zusammengesetzte Eigenschaften

Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:

• alignment-baseline
• baseline-source
• baseline-shift

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-Elements innerhalb seiner umschließenden Zeilenbox vertikal auszurichten. Zum Beispiel könnte sie verwendet werden, um ein Bild in einer Textzeile vertikal zu positionieren.
• Um den Inhalt einer Zelle in einer Tabelle vertikal auszurichten.

Verwenden Sie diese Kurzschreibweise (vertical-align) anstelle ihrer entsprechenden Langschreibweise, es sei denn, Sie müssen sie unabhängig kaskadieren oder (bei SVG-Elementen) um ältere SVG-Implementierungen zu unterstützen.

Beachten Sie, dass vertical-align nur für Inline-, Inline-Block- und Tabellenzellen-Elemente gilt: Sie können es nicht verwenden, um Block-Elemente vertikal auszurichten.

Syntax

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

Eltern-relative Werte

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

baseline

Richtet die Grundlinie des Elements an der Grundlinie seines Elternelements aus. Die Grundlinie einiger ersetzter Elemente, wie zum Beispiel <textarea>, wird nicht von der HTML-Spezifikation festgelegt, was bedeutet, dass ihr Verhalten bei diesem Schlüsselwort zwischen den Browsern variieren kann.

sub

Richtet die Grundlinie des Elements an der Tiefstellung-Grundlinie seines Elternelements aus.

super

Richtet die Grundlinie des Elements an der Hochstellung-Grundlinie seines Elternelements 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 auf die Grundlinie plus die halbe x-Höhe des Elternteils aus.

<length>

Richtet die Grundlinie des Elements auf die gegebene Länge über der Grundlinie seines Elternelements aus. Ein negativer Wert ist zulässig.

<percentage>

Richtet die Grundlinie des Elements auf den angegebenen Prozentsatz über der Grundlinie seines Elternelements aus, wobei der Wert ein Prozentsatz der line-height-Eigenschaft ist. Ein negativer Wert ist zulässig.

Zeilen-relative Werte

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

top

Richtet die Oberseite des Elements und seiner Nachkommen an der Oberseite der gesamten Zeile aus.

bottom

Richtet die Unterseite des Elements und seiner Nachkommen an der Unterseite 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 an der Grundlinie aller anderen Zellen in der Zeile aus, die an der Grundlinie ausgerichtet sind.

top

Richtet die obere Polsterkante der Zelle an der Oberseite der Zeile aus.

middle

Zentriert das Polsterkästchen der Zelle innerhalb der Zeile.

bottom

Richtet die untere Polsterkante der Zelle an der Unterseite der Zeile aus.

Negative Werte sind erlaubt.

Formale Definition

Formale Syntax

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

<alignment-baseline> = 
  baseline           |
  <baseline-metric>  

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

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

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

Beispiele

Einfaches Beispiel

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

Vertikale Ausrichtung in einer Zeilenbox

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 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, daher erbt sie den Wert der Zeile.

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

HTML

<table>
  <tbody>
    <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>
  </tbody>
</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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Typische Anwendungsfälle 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