Sie sind hier: Startseite -> CSS-Grundlagen -> text-align (Text -> Ausrichtung)

Horizontale Ausrichtung mit CSS und text-align durchführen

Häufig benötigte Funktion bei der Gestaltung

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.

Horizontale Ausrichtung mit text-align durchführen


Webhosting mit viel Software bei Alfahosting (Affiliate-Link)


ergibt:

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 Zeit lang 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.


Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)


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.

Lesen Sie auch

Mit CSS lassen sich die Texte sehr schön formatieren und man kann die gesamte Seite mit den Abständen und den Textfluss aufbauen, aber es geht noch mehr. Eine wichtige Thematik ist die Absatzformatierung, bei der vertikale und horizontale Ausrichtung ebenso möglich ist wie auch der Zeilenumbruch und damit bewusst kürzere Zeilenlängen oder die Zeilenhöhe.

Das nächste Thema bei den Formatierungen mit CSS betrifft den Rahmen. Der Rahmen ist häufig ein optisches Werkzeug, um Inhalt hervorzuheben oder zu strukturieren und man kann in CSS viele Formatierungen wählen wie der Typ der Linie, die Farbe oder auch die Rahmenstärke.

Ebenfalls interessant sind die Gestaltungsmöglichkeiten bei den Listen. Sie können bei den Abständen individuell eingestellt werden und man kann bei der ungeordneten Liste sogar ein eigenes Bild als Aufzählungszeichen wählen.

Themenseiten

Diesen Artikel teilen

Infos zum Artikel

horizontale Ausrichtung mit text-alignArtikel-Thema: Horizontale Ausrichtung mit CSS und text-align durchführen
Beschreibung: Mit CSS und dem Befehl 👍 text-align kann man die ✅ horizontale Textausrichtung durchführen wie zentriert oder linksbündig sowie rechtsbündig.

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel