Style verticalAlignEigenschaft

Style 对象参考手册Style-Objekt

Definition und Verwendung

Die verticalAlign-Eigenschaft legt die vertikale Ausrichtung des Inhalts innerhalb eines Elements fest oder gibt sie zurück.

Syntax

Legen Sie die verticalAlign-Eigenschaft fest:

Object.style.verticalAlign="value"

Gibt die verticalAlign-Eigenschaft zurück:

Object.style.verticalAlign

Wert Beschreibung
length Hebt oder senkt ein Element um eine angegebene Länge. Negative Werte sind erlaubt.
% Hebt oder senkt ein Element um einen Prozentsatz der Eigenschaft "line-height". Negative Werte sind zulässig.
baseline Standard. Richtet die Grundlinie des Elements an der Grundlinie des übergeordneten Elements aus.
sub Richtet den Text vertikal tiefgestellt aus.
super Richtet den Text vertikal hochgestellt aus.
top Richtet die Oberkante des Elements an der Oberkante des höchsten Elements in der Zeile aus.
text-top Richtet die Oberkante des Elements an der Oberkante der Schriftart des Elternelements aus.
middle Platziert das Element in der Mitte des übergeordneten Elements.
bottom Richtet die Unterkante des Elements an der Unterkante des untersten Elements in der Zeile aus.
text-bottom Richtet die Unterkante des Elements an der Unterkante der Schrift des übergeordneten Elements aus.
inherit Gibt an, dass der Wert der Eigenschaft verticalAlign vom übergeordneten Element geerbt werden soll.

Browser-Unterstützung

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Alle wichtigen Browser unterstützen die Eigenschaft verticalAlign.

Hinweis:IE7 und frühere Versionen unterstützen den Wert "inherit" nicht. IE8 unterstützt "inherit" nur, wenn ein !DOCTYPE angegeben ist. IE9 unterstützt "inherit".

Beispiel

Beispiel

Ändern Sie die vertikale Ausrichtung von Text in einer Tabelle:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Beispiel-Tutorial (example.com)</title>
<script>
function displayResult(){
    document.getElementById("td1").style.verticalAlign="bottom";
}
</script>
</head>
<body>

<table border="1" height="100px">
  <tr>
<td id="td1">Ein Beispieltext</td>
  </tr>
</table>
<br>
<input type="button" onclick="displayResult()" value="Text ausrichten">

</body>
</html>

Selbst ausprobieren »

Style 对象参考手册Style-Objekt Andere Erweiterungen