Signatur
Beschreibung
Die Eigenschaft align von HTMLImageElement spiegelt das gleichnamige HTML-Attribut eines <img>-Elements wider. Sie bestimmt, wie das Bild zum umgebenden Text bzw. zur Zeile ausgerichtet wird: "left" und "right" lassen das Bild wie bei CSS float an den Rand fließen, "top", "middle" und "bottom" steuern die vertikale Ausrichtung zur Grundlinie wie vertical-align.
Die Eigenschaft ist veraltet und gehört zu den präsentationsbezogenen Altlasten aus HTML 4. Browser unterstützen sie aus Kompatibilitätsgründen weiterhin, neue Projekte sollten aber ausschließlich CSS verwenden: float für horizontale Ausrichtung und vertical-align für vertikale Ausrichtung.
Sinnvoll ist align heute vor allem beim Auslesen oder Migrieren von Alt-Markup, etwa um bestehende align-Attribute automatisiert in moderne CSS-Regeln zu überführen.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | "" | Beim Setzen: einer der Werte "left", "right", "top", "middle", "bottom" (Groß-/Kleinschreibung egal). Browser erkennen teils zusätzlich "center", "baseline", "texttop", "absmiddle", "absbottom". Der Wert wird unverändert ins Attribut geschrieben. |
Rückgabewert
align-Attributs genau so, wie er im Markup steht, oder ein leerer String "", wenn das Attribut fehlt.Beispiele
Ausrichtung auslesen und setzen
const img = document.createElement('img');
img.src = 'logo.png';
img.alt = 'Logo';
console.log(JSON.stringify(img.align)); // Attribut fehlt
img.align = 'right';
console.log(img.align);
console.log(img.getAttribute('align'));Alt-Markup nach CSS migrieren
// Wandelt veraltete align-Attribute in moderne CSS-Eigenschaften um
const migrateImageAlign = (root = document) => {
for (const img of root.querySelectorAll('img[align]')) {
const value = img.align.toLowerCase();
if (value === 'left' || value === 'right') {
img.style.float = value;
} else if (['top', 'middle', 'bottom'].includes(value)) {
img.style.verticalAlign = value;
}
img.removeAttribute('align');
}
};
migrateImageAlign();
console.log(document.querySelectorAll('img[align]').length);Empfohlene moderne Alternative mit CSS
const img = document.querySelector('img');
// Statt img.align = 'left':
img.style.float = 'left';
img.style.marginInlineEnd = '1rem';
// Statt img.align = 'middle':
// img.style.verticalAlign = 'middle';
console.log(getComputedStyle(img).float);// Wichtig · Fallstricke
- Veraltet: Die Eigenschaft ist im HTML Living Standard als obsolet markiert. Validatoren melden das Attribut als Fehler. Verwenden Sie stattdessen CSS
floatbzw.vertical-align. - Der Wert wird nicht normalisiert:
img.align = 'LEFT'liefert beim Auslesen wieder"LEFT". Vergleiche daher immer mittoLowerCase(). - Ungültige Werte werden ohne Fehlermeldung ins Attribut übernommen, haben aber keinen Effekt auf die Darstellung.
- CSS-Regeln (z. B.
floatim Stylesheet) haben Vorrang, daalignnur als präsentationaler Hinweis mit sehr niedriger Spezifität wirkt. "middle"verhält sich in Browsern nicht exakt wievertical-align: middle, sondern richtet die Bildmitte an der Grundlinie aus; das Ergebnis kann leicht abweichen.- Kompatibilität: In allen gängigen Browsern (Chrome, Firefox, Safari, Edge) weiterhin verfügbar, eine Entfernung ist aus Kompatibilitätsgründen unwahrscheinlich.