CSS, HTML und Javascript mit {stil}

text-align Ausrichtung von Texten

CSS text-align: Text linksbündig, rechtsbündig, zentriert und Blocksatz

CSS text-align richtet Texte und andere Inline-Elemente wie Bilder innerhalb eines Blockelements rechtsbündig, linksbündig, zentriert oder im Blocksatz aus. Die Vorgabe ist linksbündiger Text.

Blocksatz in Webseiten ist allerdings kritisch, da noch nicht alle Brower eine gute Silbentrennung unterstützen. Ohne Silbentrennung zeigt Text im Blocksatz Lücken.

Herrliche Frucht, im Haine behutsam gereift.

Francisca Stoecklin (1894-1931)

<div style="text-align: center">
   <img src="bild.png" width="62" height="100" alt="bild.png" />
   <p>Herrliche Frucht, im Haine behutsam gereift.</p>
   <p>Francisca Stoecklin  (1894-1931)</p>
</div>

Da text-align erblich ist, erben Inline-Elemente unterhalb eines Blocks, für den text-align notiert ist, den Wert einer CSS text-align-Regel.

Wenn die Sprache der Webseite eine andere Laufrichtung erfordert – also für Texte, die von rechts nach links laufen – wird nicht text-align, sondern die CSS-Regel direction: rtl verwendet.

In CSS3 sind neue Werte hinzugekommen: text-align: start und text-align: end vereinfachen das Ausrichten von Text in mehrsprachigen HTML-Dokumenten.

direction: ltr

text-align: left;

text-align: start;

text-align: end;

direction: rtl

text-align: left;

text-align: start;

text-align: end;

CSS text-align

text-align
text-align richtet den Text aus.
Werte
left | right | center | justify | inherit
left
ist die Standardeinstellung: Text wird linksbündig ausgerichtet.
right
richtet den Text rechtsbündig aus.
center
zentriert Text mit gleichem Weißraum nach rechts und links.
justify
richtet Text im Blocksatz aus und fügt dafür zusätzlichen Weißraum zwischen Zeichen und Wörter ein.
start
Wie left in Texten, die von links nach rechts laufen (ltr), aber in Texten, die von rechts nach links laufen (rtl), läuft der Text von rechts nach links.
end
Wie right in Texten bei ltr und wie left in rtl.

CSS justify: Blocksatz mit Lücken

Da die Browser die Silbentrennung nur fragmentarisch beherrschen, werden Texte auf HTML-Seiten im Blocksatz schnell unschöne Lücken aufweisen. Auch die weiche Silbentrennung, die durch &shy; im Quelltext des HTML-Dokuments verwendet werden kann, wird noch nicht von allen Browsern erkannt.

Blocksatz bringt alle Zeilen – bis auf die letzte – auf dieselbe Breite. Dafür muss der Abstand zwischen den Wörtern (Wortzwischenraum) vergrößert werden. Blocksatz soll Ruhe in schmale Spalten bringen und Absätze optisch zusammenhalten.

.demo { hyphens: auto; 
        text-align: justify
}

Abhilfe bringt CSS3 hyphens, aber bis heute wird hyphens nur mit Browser-Präfix von IE10+ (aber nicht MS Edge), Safari und Firefox erkannt.

<div style="text-align: center;">
   <div>Blockelement innerhalb eines eines Blockelements</div>
</div>

word-break

Immer wieder kommt es vor, dass lange Wörter bzw. Zeichenketten die Breite des umfassenden Blocks überschreiten. Der Browser fügt Zeilenumbrüche nur bei bestimmten Zeichen ein – z.B. bei Leerzeichen, Bindestrichen oder Trennzeichen wie &shy;

word-break erzwingt einen Zeilenumbruch bei der vorgegebenen Breite des Blocks.

Angesichts der Genehmigungszuständigkeitsübertragungsverordnung seitens des Oberlandesgerichts aufgrund des Überwachungsaufgabenübertragungsgesetz identifizierten die Verkehrsüberwachungsbehörden keine Regelverstöße seitens des Beklagten.

word-break: break-all;
word-break: break-word; // Webkit-Browser

IE 11, Firefox, Safari, Chrome – jeder Browser fügt den Zeilenumbruch bei word-break individuell ein. IE11 und Firefox trennen alles, was den Rand des Block erreicht. Safari trennt nur die Wörter, die breiter als der umfassende Block sind.

Blöcke zentrieren

Blockelemente können nicht durch text-align ausgerichtet werden – text-align kann Layout-Elemente einer Webseite nicht in der Mitte des Browserfensters positionieren.

CSS margin kann Block-Elemente in einem Block zu zentrieren.

Blockelement innerhalb eines Blockelements

margin: 1em auto

display:table-cell; vertical-align:middle zentriert einen Block vertikal.

Blockelement innerhalb eines Blockelements

display:table-cell;
vertical-align:middle

Schnee von gestern: Internet Explorer 6 und 7 zentrieren – entgegen dem Standard – auch den Text innerhalb von Elementen mit text-align:center.

text-align