von Thomas Salvador.
HTML align-Attribute steuern die Ausrichtung der Elemente.
Dabei kann in HTML align sowohl auf Texte als auch auf Grafiken, Tabellenzellen und ganze Tabellen angewendet werden.
<p align="center">Zentrierter Absatz.</p>
Zentriert den Absatz.
<img src="/bild.gif" align="right"/>
Nimmt das Bild aus dem Fließtext und setzt es rechtsbündig. Der Fließtext umfließt das Bild.
<table align="left"><tr><td>HTML align-Infobox</td></tr></table>
Nimmt die Tabelle aus dem Fließtext und setzt sie linksbündig. Der Fließtext umfließt die Tabelle.
Neben den bereits gezeigten Werten der HTML align Attribute
gibt es noch den Wert justify, der einen Blocksatz erstellt.
Ein Absatz über mehrere Bildschirmzeilen erscheint hier im Blocksatz.
Das wesentliche Problem bei der Blocksatzdarstellung ist die mangelnde Kenntnis von Trennungregeln, womit Worte entweder ganz in der einen oder ganz in der anderen Zeile dargestellt werden. Da damit die Auffüllung mancher Zeilen stark variiert, kann es zu insbesondere bei schmalen Spalten und langen Worten zu vergleichsweise kurzen Zeilen kommen, da das letzte Wort in die nächste Zeile wandert. Diese kurzen Zeilen können dann in der kurzen Zeile nur durch große Wortzwischenräume auf Blocksatz gebracht werden. Dies sieht nicht immer gut aus.
Während die direkte Angabe in HTML align Attributen auch heute noch funktioniert, hat sich seit Einführung von CSS jedoch durchgesetzt, diese Formatierung von HTML in CSS auszulagern.
CSS kann direkt am Element genannt werden.
<p style="text-align:center">Zentriert den Absatz.</p>
Wegen Konsistenz, Wiederverwendbarkeit und Wartbarkeit wird jedoch in separate Dateien ausgelagert.
CSS:
p {text-align:center;}
HTML:
<p>Absatz. Ausgerichtet.</p> <p>Absatz. Auch ausgerichtet.</p> <p>Absatz. Wieder ausgerichtet.</p>
Hierbei arbeitet man dann gerne mit CSS Klassen, die die Formatierung nur auf alle Nutzer der Klasse anwenden.
CSS:
p.ausgerichtet {text-align:center;}
HTML:
<p>Absatz. Default.</p> <p class="ausgerichtet">Ausgerichtet.</p> <p>Absatz. Wieder default.</p>
Der Vorteil liegt nun darin, dass Änderungen an zentraler Stelle durchgeführt werden können. Möchten Sie zum Beispiel die ausgerichtet-Absätze rechtsbündig statt zentriert setzen, so genügt die Änderung obiges CSS-Fragmentes auf.
p.ausgerichtet {text-align:right;}
und die Änderung ist gemacht. Dieses Vorgehen wird daher insbesondere gerne bei der farbigen Gestaltung genutzt.
Im Gegensatz dazu, müssten Sie durch alle HTML Dateien schauen und diese anpassen, wenn Sie HTML align genutzt hätten.