vertical-align: Vertikale Ausrichtung

0 | 0 Kommentare | 2202 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "vertical-align: Vertikale Ausrichtung" mit Ihrem Wissen!

Anzeige Hier werben

vertical-align

Werte: baseline, sub, super, top, text-top, middle, bottom, text-bottom, Prozentangabe, Längenangabe
Standardwert: baseline
Vererbung: Nein
Anwendbar auf: Inline-Elemente und Tabellen-Zellen
CSS-Level: CSS1, CSS2.1, CSS3

Ergänzen:

  • Bilder wie das genau aussieht (bei im Text) (so)
  • Beispiel für verwendung im Text (z.B. hochgestellte Anmerkungen[Anmerkung])
  • Anwendung (Bilder-vertikal zentrieren (geht nicht im IE7,8)

vertical-align wird dazu verwendet Elemente vertikal auszurichten. Je nach Element, auf das die Eigenschaft angewandt wird, hat die Eigenschaft aber unterschiedliche Bedeutung.

Bedeutung

Im Text

Innerhalb von Text können durch die Verwendung von vertical-align Elemente, beispielsweise Bilder, innerhalb der Zeile positioniert werden. Hierbei wird die Zeilenhöhe beachtet.

In Tabellen-Zellen

Wird vertical-align auf Tabellen-Zellen angewendet, so ändert sich die Bedeutung. Die vertikale Ausrichtung bezieht sich nun auf den gesamten Inhalt der Zelle.

Die Werte sub, super, text-bottom, text-top sowie Längen- oder Prozentangaben sind bei Tabellen-Zellen nicht möglich und werden als baseline interpretiert.

Werte

Im Text

Wert Beschreibung Bild
 Beispiel Kompatibilität
baseline Ausrichtung an der Basislinie
(ohne Basislinie unten bündig)		 ---
 vertical-align: baseline
Firefox2Unterstützt3Unterstützt3.1Unterstützt
IE6Unterstützt7Unterstützt8Unterstützt
Opera9Unterstützt9.5Unterstützt
Safari3Unterstützt3.1Unterstützt4Unterstützt
35%
sub tieferstellen
 --- vertical-align: sub
Firefox2Unbekannt3Unbekannt3.1Unbekannt
IE6Fast7Unbekannt8Unbekannt
Opera9Unterstützt9.5Unterstützt
Safari3Unbekannt3.1Unbekannt4Unbekannt
2%
super höherstellen --- vertical-align: super
Firefox2Unbekannt3Unbekannt3.1Unbekannt
IE6Fast7Unbekannt8Unbekannt
Opera9Unterstützt9.5Unterstützt
Safari3Unbekannt3.1Unbekannt4Unbekannt
2%
top oben bündig --- vertical-align: top
Firefox2Unbekannt3Unbekannt3.1Unbekannt
IE6Fast7Unbekannt8Unbekannt
Opera9Unbekannt9.5Unbekannt
Safari3Unbekannt3.1Unbekannt4Unbekannt
2%
text-top bündig mit oberem Schriftrand --- vertical-align: text-top
Firefox2Unbekannt3Unbekannt3.1Unbekannt
IE6Unterstützt7Unbekannt8Unbekannt
Opera9Unbekannt9.5Unbekannt
Safari3Unbekannt3.1Unbekannt4Unbekannt
2%
middle mittig --- vertical-align: middle
Firefox2Unterstützt3Unterstützt3.1Unterstützt
IE6Unterstützt7Unterstützt8Unterstützt
Opera9Unterstützt9.5Unterstützt
Safari3Unterstützt3.1Unterstützt4Unterstützt
35%
bottom unten bündig --- vertical-align: bottom
Firefox2Unbekannt3Unbekannt3.1Unbekannt
IE6Fast7Unbekannt8Unbekannt
Opera9Unbekannt9.5Unbekannt
Safari3Unbekannt3.1Unbekannt4Unbekannt
2%
text-bottom bündig mit unterem Schriftrand --- vertical-align: text-bottom
Firefox2Unbekannt3Unbekannt3.1Unbekannt
IE6Unterstützt7Unbekannt8Unbekannt
Opera9Unbekannt9.5Unbekannt
Safari3Unbekannt3.1Unbekannt4Unbekannt
2%
Prozentangabe von der Basislinie um einen Prozentwert der Zeilenhöhe anheben --- vertical-align: 10%
Firefox2Unterstützt3Unterstützt3.1Unterstützt
IE6Unterstützt7Unterstützt8Unterstützt
Opera9Unterstützt9.5Unterstützt
Safari3Unterstützt3.1Unterstützt4Unterstützt
35%
Längenangabe von der Baislinie um Länge angeben --- vertical-align: 3px
Firefox2Unterstützt3Unterstützt3.1Unterstützt
IE6Unterstützt7Unterstützt8Unterstützt
Opera9Unterstützt9.5Unterstützt
Safari3Unterstützt3.1Unterstützt4Unterstützt
35%

An Grafik

Wert Beschreibung Bild
 Beispiel Kompatibilität
baseline Ausrichtung an der Basislinie
(ohne Basislinie unten bündig)		 ---
 vertical-align: baseline
Firefox2Unterstützt3Unterstützt3.1Unterstützt
IE6Unterstützt7Unterstützt8Unterstützt
Opera9Unterstützt9.5Unterstützt
Safari3Unterstützt3.1Unterstützt4Unterstützt
35%
sub tieferstellen
 --- vertical-align: sub
Firefox2Unbekannt3Unbekannt3.1Unbekannt
IE6Unterstützt7Unbekannt8Unbekannt
Opera9Unterstützt9.5Unterstützt
Safari3Unbekannt3.1Unbekannt4Unbekannt
2%
super höherstellen --- vertical-align: super
Firefox2Unbekannt3Unbekannt3.1Unbekannt
IE6Unterstützt7Unbekannt8Unbekannt
Opera9Unterstützt9.5Unterstützt
Safari3Unbekannt3.1Unbekannt4Unbekannt
2%
top oben bündig --- vertical-align: top
Firefox2Unterstützt3Unterstützt3.1Unterstützt
IE6Nein7Unbekannt8Unbekannt
Opera9Unterstützt9.5Unterstützt
Safari3Unterstützt3.1Unterstützt4Unterstützt
1%
text-top bündig mit oberem Schriftrand --- vertical-align: text-top
Firefox2Unbekannt3Unbekannt3.1Unbekannt
IE6Nein7Unbekannt8Unbekannt
Opera9Unbekannt9.5Unbekannt
Safari3Unbekannt3.1Unbekannt4Unbekannt
0%
middle mittig --- vertical-align: middle
Firefox2Unbekannt3Unbekannt3.1Unbekannt
IE6Nein7Unbekannt8Unbekannt
Opera9Unbekannt9.5Unbekannt
Safari3Unterstützt3.1Unterstützt4Unterstützt
1%
bottom unten bündig --- vertical-align: bottom
Firefox2Unterstützt3Unterstützt3.1Unterstützt
IE6Nein7Unbekannt8Unbekannt
Opera9Unterstützt9.5Unterstützt
Safari3Unterstützt3.1Unterstützt4Unterstützt
1%
text-bottom bündig mit unterem Schriftrand --- vertical-align: text-bottom
Firefox2Unbekannt3Unbekannt3.1Unbekannt
IE6Nein7Unbekannt8Unbekannt
Opera9Unbekannt9.5Unbekannt
Safari3Unbekannt3.1Unbekannt4Unbekannt
0%
Prozentangabe von der Basislinie um einen Prozentwert der Zeilenhöhe anheben --- vertical-align: 10%
Firefox2Unterstützt3Unterstützt3.1Unterstützt
IE6Unterstützt7Unterstützt8Unterstützt
Opera9Unterstützt9.5Unterstützt
Safari3Unterstützt3.1Unterstützt4Unterstützt
35%
Längenangabe von der Baislinie um Länge angeben --- vertical-align: 3px
Firefox2Unterstützt3Unterstützt3.1Unterstützt
IE6Unterstützt7Unterstützt8Unterstützt
Opera9Unterstützt9.5Unterstützt
Safari3Unterstützt3.1Unterstützt4Unterstützt
35%

In Tabellen-Zellen

Wert Beschreibung Beispiel Kompatibilität
baseline Ausrichtung an der Basislinie
in Tabellen wird die Basislinie der ersten Zelle in der Zeile verwendet		 vertical-align: baseline
Firefox2Unterstützt3Unterstützt3.1Unterstützt
IE6Unterstützt7Unterstützt8Unterstützt
Opera9Unterstützt9.5Unterstützt
Safari3Unterstützt3.1Unterstützt4Unterstützt
35%
top oben bündig vertical-align: top
Firefox2Unterstützt3Unterstützt3.1Unterstützt
IE6Unterstützt7Unterstützt8Unterstützt
Opera9Unterstützt9.5Unterstützt
Safari3Unterstützt3.1Unterstützt4Unterstützt
35%
middle mittig vertical-align: middle
Firefox2Unterstützt3Unterstützt3.1Unterstützt
IE6Unterstützt7Unterstützt8Unterstützt
Opera9Unterstützt9.5Unterstützt
Safari3Unterstützt3.1Unterstützt4Unterstützt
35%
bottom unten bündig vertical-align: bottom
Firefox2Unterstützt3Unterstützt3.1Unterstützt
IE6Unterstützt7Unterstützt8Unterstützt
Opera9Unterstützt9.5Unterstützt
Safari3Unterstützt3.1Unterstützt4Unterstützt
35%
sub, super, text-top , text-bottom, Prozentangabe, Längenangabe
 diese Werte werden in Tabellen als baseline interpretiert vertical-align: sub
Firefox2Unbekannt3Unbekannt3.1Unbekannt
IE6Nein7Unbekannt8Unbekannt
Opera9Unbekannt9.5Unbekannt
Safari3Unbekannt3.1Unbekannt4Unbekannt
0%

Beispiel

vertical-align in tabellentzellen  
Dieses Beispiel ausprobieren
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<style type="text/css"> table, td { border: 1px solid #AAA; } </style>
<table style="height: 10em;">
  <tr>
    <td style="vertical-align: baseline; font-size: 2em;">Basislinie<br />(groß)</td>
    <td style="vertical-align: baseline;">Basislinie<br />(kleiner)</td>
    <td style="vertical-align: top;">oben</td>
    <td style="vertical-align: middle;">mittig</td>
    <td style="vertical-align: bottom;">unten</td>
  </tr>
</table>
Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 3 Personen an der Seite "vertical-align: Vertikale Ausrichtung" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "vertical-align: Vertikale Ausrichtung" hier bearbeiten.

Mitarbeiter

Kommentare: vertical-align: Vertikale Ausrichtung