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:
- 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.
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 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
(undsub
,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 Wert | 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
<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 einem Linien-Container
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
<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
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