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⁩.

Die vertical-align CSS-Eigenschaft legt die vertikale Ausrichtung eines Inline-, Inline-Block- oder Tabellenzellen-Elements 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:

Zur vertikalen Ausrichtung des Rahmens eines Inline-Elements innerhalb seines umgebenden Linienrahmens. Beispielsweise kann sie verwendet werden, um ein Bild vertikal in einer Textzeile zu positionieren.
Zur vertikalen Ausrichtung des Inhalts einer Zelle in einer Tabelle.

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 ist 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 Basislinie des Elements an der Basislinie seines Elternelements aus. Die Basislinie einiger ersetzter Elemente, wie zum Beispiel <textarea>, ist nicht durch die HTML-Spezifikation festgelegt, was bedeutet, dass ihr Verhalten mit diesem Schlüsselwort zwischen Browsern variieren kann.
sub: Richtet die Basislinie des Elements an der Tiefstellungs-Basislinie seines Elternelements aus.
super: Richtet die Basislinie des Elements an der Hochstellungs-Basislinie seines Elternelements aus.
text-top: Richtet die Oberseite des Elements an der Oberseite der Schrift des Elternelements aus.
text-bottom: Richtet die Unterseite des Elements an der Unterseite der Schrift des Elternelements aus.
middle: Richtet die Mitte des Elements an der Basislinie plus der Hälfte der x-Höhe des Elternteils aus.
<length>: Richtet die Basislinie des Elements in der angegebenen Länge oberhalb der Basislinie seines Elternelements aus. Ein negativer Wert ist erlaubt.
<percentage>: Richtet die Basislinie des Elements in dem angegebenen Prozentsatz oberhalb der Basislinie seines Elternelements aus, wobei der Wert ein Prozentsatz der line-height-Eigenschaft ist. Ein negativer Wert ist erlaubt.

Linierrelationale 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 Zeile aus.
bottom: Richtet die Unterseite des Elements und seiner Nachkommen an der Unterseite der gesamten Zeile aus.

Bei Elementen, die keine Basislinie haben, wird stattdessen die untere Kantenlinie verwendet.

Werte für Tabellenzellen

baseline (und sub, super, text-top, text-bottom, <length>, und <percentage>): Richtet die Basislinie der Zelle an der Basislinie aller anderen Zellen in der Zeile aus, die basislinienorientiert sind.
top: Richtet den oberen Innenabstand der Zelle an der Oberseite der Zeile aus.
middle: Zentriert den Innenabstand der Zelle innerhalb der Zeile.
bottom: Richtet den unteren Innenabstand 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 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 Linienrahmen

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 auf bottom als Standardwert.

Die ersten vier Zellen setzen jeweils ihren eigenen vertical-align-Wert und überschreiben damit den Wert der Zeile.
Die fünfte Zelle setzt keinen vertical-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 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

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

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden