From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/web/css/vertical-align/index.html | 240 +++++++++++++++++++++++++++++ 1 file changed, 240 insertions(+) create mode 100644 files/de/web/css/vertical-align/index.html (limited to 'files/de/web/css/vertical-align/index.html') diff --git a/files/de/web/css/vertical-align/index.html b/files/de/web/css/vertical-align/index.html new file mode 100644 index 0000000000..2a6779dbee --- /dev/null +++ b/files/de/web/css/vertical-align/index.html @@ -0,0 +1,240 @@ +--- +title: vertical-align +slug: Web/CSS/vertical-align +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/vertical-align +--- +
{{CSSRef}}
+ +

Die vertical-align CSS Eigenschaft bestimmt die vertikale Ausrichtung in inline Elementen oder in Tabellenzellen.

+ +
{{EmbedInteractiveExample("pages/css/vertical-align.html")}}
+ +

Die vertical-align Eigenschaft kann in zwei Anwendungsfällen genutzt werden:

+ + + +
+ + + +
+ +

{{EmbedLiveSample("vertical-align-inline", 1200, 120, "", "", "example-outcome-frame")}}

+ + + +
+ + + +
+ +

{{EmbedLiveSample("vertical-align-table", 1200, 210, "", "", "example-outcome-frame")}}

+ +

Beachte, dass sich vertical-align nur auf inline- und Tabellenzellenelemente bezieht: es kann nicht eingesetzt werden um Block-level Elemente auszurichten.

+ +

Syntax

+ +

 

+ +
/* Schlüsselwörter */
+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> Werte */
+vertical-align: 10em;
+vertical-align: 4px;
+
+/* <percentage> Werte */
+vertical-align: 20%;
+
+/* Globale Werte */
+vertical-align: inherit;
+vertical-align: initial;
+vertical-align: unset;
+ +

Bei Elementen, die keine Grundlinie besitzen, beziehen sich die Angaben auf die untere äußere Kante (bottom margin edge).

+ +

Werte für inline-Elemente

+ +
+
baseline
+
Die Grundlinie des Elements liegt auf der Grundlinie des Elternelements.
+
sub
+
Das Element ist tiefgestellt.
+
super
+
Das Element ist hochgestellt.
+
text-top
+
Die Oberkante des Elements liegt auf der Oberkante der Schrift des Elternelements.
+
text-bottom
+
Die Unterkante des Elements liegt auf der Unterkante der Schrift des Elternelements.
+
middle
+
Die Mitte des Elements liegt auf der Mitte der Kleinbuchstaben des Elternelements.
+
top
+
Die Oberkante des Elements liegt auf der Oberkante des Elternelements.
+
bottom
+
Die Unterkante des Elements liegt auf der Unterkante des Elternelements.
+
<Prozentzahl>
+
Die Unterkante des Elements liegt um einen prozentualen Wert höher als die Unterkante des Elternelements. Die Anteile beziehen sich auf den Wert der line-height Eigenschaft.
+
<Länge>
+
Die Unterkante des Elements liegt um einen bestimmten Wert höher als die Unterkante des Elternelements. Negative Werte sind erlaubt.
+
inherit
+
Der Wert des Elternelements wird geerbt.
+
+ +

Werte für Tabellenzellen

+ +
+
baseline, sub, super, text-top, text-bottom, <Prozentzahl> und <Länge>
+
Die Grundlinie des Elements liegt auf der Grundlinie des Elternelements
+
top
+
Die Oberkante der Textzeile liegt auf der Oberkante der Tabellenzelle.
+
middle
+
Die vertikale Mitte der Textzeile liegt auf der Mitte der Tabellenzelle.
+
bottom
+
Die Unterkante der Textzeile liegt auf der Unterkante der Tabellenzelle.
+
inherit
+
Der Wert des Elternelements wird geerbt.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiel

+ +

HTML

+ +
<div>Ein <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> Bild mit default Ausrichtung.</div>
+<div>Ein <img class="top" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> Bild mit text-top Ausrichtung.</div>
+<div>Ein <img class="bottom" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> Bild mit text-bottom Ausrichtung.</div>
+<div>Ein <img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> Bild mit middle Ausrichtung.</div>
+
+ +

CSS

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

Ergebnis

+ +

{{EmbedLiveSample("Beispiel")}}

+ +

Spezifikation

+ +

 

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Transitions', '#animatable-css', 'vertical-align')}}{{Spec2('CSS3 Transitions')}}Definiertvertical-align als animierbar.
{{SpecName('CSS2.1', 'visudet.html#propdef-vertical-align', 'vertical-align')}}{{Spec2('CSS2.1')}}Fügt den {{cssxref("<length>")}} Wert hinzu und erlaubt die Anwendung auf Elemente mit table-cell {{cssxref("display")}}-Typ.
{{SpecName('CSS1', '#vertical-align', 'vertical-align')}}{{Spec2('CSS1')}}Einführung.
+ +

{{cssinfo}}

+ +

Browserkompatibilität

+ +

{{Compat("css.properties.vertical-align")}}

+ +

Siehe auch

+ + -- cgit v1.2.3-54-g00ecf