CSS/Eigenschaften/Textausrichtung/vertical-align

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Sie können mit der Eigenschaft vertical-align die vertikale Ausrichtung von Text kontrollieren. Es gibt dabei in Abhängigkeit der display-Eigenschaft verschiedene Interpretationen der Eigenschaft.

  • CSS 1.0
  • CSS 3.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel ansehen …
<!doctype html>
<html>
<head>
<title>vertical-align</title>
  <style>
    .one     { display:block; }
    .one *   { background: #ddd; }
    td       { background: #ddd; height: 3em; }
  </style>
</head>
<body>
 
<!-- 1. -->
  <p class="one">Dieser Text hat verschiedene Inline-Elemente, 
  die bezüglich der Grundlinie wie folgt ausgerichtet sind: 
    <b style="vertical-align:super">Erhöht wie Superscript</b>
    <i style="vertical-align:sub">Abgesenkt wie Subscript</i>
    <span style="vertical-align:baseline">Erscheint normal</span>
  </p>
 
<!-- 2. -->
  <table>
    <tr>
      <td style="vertical-align:top">bündig oben</td>
      <td style="vertical-align:middle">zentriert</td>
      <td style="vertical-align:bottom">bündig unten</td>
    </tr>
  </table>
 
 
</body>
</html>
  1. Im Beispiel werden verschiedene Inline-Elemente innerhalb eines Block-Elements vertikal ausgerichtet.
  2. In Tabellen können Sie Zelleninhalte mit top middle oder bottom ausrichten. Damit die Auswirkung im Beispiel erkennbar wird, erhalten die Tabellenzellen eine Höhe und eine Hintergrundfarbe.


Die Eigenschaft vertical-align wird vererbt, folgende Werte können zugewiesen werden:

  • eine Längenangabe, positive Angaben heben das Element, negative senken es
  • Prozentwerte, sie beziehen sich auf die Zeilenhöhe, positive heben das Element, negative senken es

Erlaubt sind zudem folgende Schlüsselwörter:

  • baseline, richtet die Schrift-Grundlinie des Elements an der Grundlinie des Elternelements aus
  • middle, richtet die Kind-Box-Mitte an der Grundlinie plus der Hälfte der x-Höhe des Elternelements aus
  • sub, senkt die Grundlinie der Box auf die Höhe der Sub-Schrift des Parent-Elements, ohne die Schriftgröße zu verändern
  • super, hebt die Grundlinie der Box auf die Höhe der Super-Script des Parent-Elements, ohne die Schriftgröße zu verändern
  • text-top, richtet die Box-Oberkante an der Oberkante des Parent-Inhaltbereichs aus
  • text-bottom, richtet die Box-Unterkante an der Unterkante des Parent-Inhaltsbereichs aus
  • top, richtet den Inhalt der Box an der Oberkante der Linebox aus
  • bottom, richtet den Inhalt der Box an der Unterkante der Linebox aus
  • inherit, Voreinstellung, gibt an, dass der Wert des Elternelements übernommen wird

kein gültiges Schlüsselwort

  • center, die meisten Browser interpretieren es dennoch als middle
Beachten Sie: Für Tabellen lassen sich ausschließlich die Werte
  • top,
  • middle,
  • bottom angeben.


Beachten Sie: vertical-align ist nicht dazu geeignet, Blockelemente selbst auszurichten. In der Forums/FAQ finden Sie einige Möglichkeiten Inhalte vertikal zu zentrieren.

[Bearbeiten] Anwendungsbeispiele

[Bearbeiten] Unterlängen

Bilder sind von Hause aus auch inline-Elemente, d.h. sie können mit Text in einer Zeile stehen. Der default-Wert von vertical-align ist baseline. Somit stehen die Bilder, auch wenn das Elternelement keinen Text enthält, in Höhe der Grundlinie. Wie sie in folgender Grafik sehen können, ist die Grundlinie aber die Unterseite der Kleinbuchstaben.

Grafik:Unterlänge

Der Platz für Unterlängen wie in g, p, j, q wird reserviert. Abhilfe schafft vertical-align: bottom.

[Bearbeiten] siehe auch

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML