Sie sind hier: Startseite -> CSS-Grundlagen -> Absatzformatierung -> Horiz. Ausrichtung

CSS-Grundlagen: text-align

text-align: horizontale Ausrichtung mit CSS

In HTML wurde sehr lange die Ausrichtung der Absätze, aber auch Inhalte in Tabellen mit align geregelt. Dieser Parameter teilte dem Browser mit, ob ein Absatz zentriert, linksbündig oder rechtsbündig sein soll oder auch als Sonderform den Blocksatz darstellt.

Diese Aufgaben hat im Rahmen von CSS der Befehl text-align übernommen, wobei die Arten der Zuweisung gleich geblieben sind. Es sind die praktischen Gründe, die dafür sprechen, align zu entsorgen und mit CSS zu arbeiten, obwohl es noch immer sehr viele Webseiten gibt, in deren Quellcode align anzutreffen ist.

Das ist ein linksbündiger Satz.

Jetzt bin ich zentriert.

Nun bin ich rechtsbündig.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,

Von der reinen Optik her ist die Arbeitsverrichtung von text-align unter CSS ident mit align unter HTML. Doch der wesentliche Vorteil für die CSS-Variante besteht darin, dass man in einer externen CSS-Datei zentral die Formatierung vornehmen kann. So ist es möglich, auf Knopfdruck die Einstellungen vieler Absätze auf vielen Seiten zu verändern und anzupassen.

Dazu ein praktisches Beispiel aus der Vergangenheit, an das sich manche erinnern könnten. Es war eine zeitlang Trend, Text im Blocksatz darzustellen. Beide Ränder waren gerade und die Zeitungen schauen ja auch so aus. Nur hat sich herausgestellt, dass die Browser die Texte unterschiedlich beurteilt haben und so hat der eine Browser die vorgesehenen Abteilungen der Wörter richtig umgesetzt, der andere nicht und das Abteilungszeichen - der Bindestrich - sorgte für ein hässliches Loch mitten in den Wörtern.

Dazu kam, dass immer mehr Bildschirmauflösungen Platz gegriffen haben und der Blocksatz einfach nicht mehr schön ausgeschaut hat. Auch die Textlücken haben nicht mehr gefallen. Kurzum: aus dem Blocksatz wurde auf vielen Webseiten wieder der linksbündige, standartisierte Text.

Wer mit align beim p-Tag die Absätze mitten im HTML-Dokument formatiert hatte, musste alle Seiten per Hand ändern, wer eine CSS-Variante mit entsprechender Definition für Absätze gewählt hatte, war klar im Vorteil, denn man brauchte nur text-align ändern und sämtliche Seiten waren ihren Blocksatz los - Zeitaufwand: maximal fünf Minuten.

Ebenfalls interessant:

Einzug

Informationen über den CSS-Befehl text-indent, mit dem die erste Zeile eines Absatzes via CSS eingezogen oder ausgerückt werden kann.

Zeilenumbruch

Informationen über den CSS-Befehl white-space, mit dem der Zeilenumbruch eingestellt werden kann.

Zeilenabstand

Informationen über den CSS-Befehl line-height, mit dem der Zeilenabstand in einem Text via CSS eingestellt werden kann.

Vertikale Ausrichtung

Informationen über den CSS-Befehl vertical-align, mit dem Text auf einer Webseite vertikal angepasst werden kann.

[aktuelle Seite]

Horiz. Ausrichtung

Informationen über die horizontale Ausrichtung mit CSS durch den CSS-Befehl text-align.

Zurück zum Hauptthema

Übersicht Absatzformatierung

Startseite CSS-Grundlagen