text-align Ausrichtung von Texten

CSS text align: Text ausrichten linksbündig, rechtsbündig, zentriert und Blocksatz, Text vertikal zentrieren

CSS text-align richtet Texte und 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>

Text vertikal zentrieren

Während Tabellen mit vertical-align: middle ihren Inhalt vertikal zentrieren können können, bleibt text-align auf die Horizontale beschränkt.

Um einen Text oder einen Block vertikal zu zentrieren, greift entweder display : table-cell oder – wenn alte Browser keine Rolle spielen – display : flex.

Text mit display: flex vertikal zentrieren

CSS
.vertikal-flex {
   width: 100%;
   height: 30vh;
   display: flex;
   align-items: center;
   justify-content: center;
}

Und zusätzlich an die flex-Syntax für IE 10 denken!

html
<div class="vertikal-flex">
    <p>Textvertikal zentrieren</p>
</div>

Die Alternative für Browser aus der Generation IE9 ist display : table und display : table-cell. Das ist einen Tick aufwändiger: Das umfassende Element braucht display : table, das Elemente selber display : table-cell.

Text mit display: table und display: table-cell vertikal zentrieren

CSS
.vertical-table {
	display:table;
}
.vertical-table p {
	display: table-cell;
	vertical-align: middle;
	text-align:center;
}
HTML
<div class="vertical-table">
    <p>Text vertikal zentrieren</p>
</div>

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-left : auto; margin-right: auto zentriert Block-Elemente horizontal innerhalb ihres umfassenden Blocks.

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

CSS
.horizontal-mitte {
   margin:1em auto;
   display: table;
}
.vertikal-mitte { 
   display: table-cell; 
   vertical-align: middle;
}
HTML
<div class="horizontal-mitte">
   <div class="vertikal-mitte">
      <p>Blockelement innerhalb eines Blockelements</p>
      <p><code>display:table-cell;<br>vertical-align:middle</code></p>
   </div>
</div>

Die moderne Alternative ist wieder display : flex.

Blockelement innerhalb eines Blockelements

display:table-cell;
vertical-align:middle

CSS
.flex-center {
   width: 70%;
   margin: 1em auto; 
   display:flex;
   align-items:center;
   justify-content:center
HTML
<div class="flex-center">
   <div>
      <p>Blockelement innerhalb eines Blockelements</p>
      <p> … </p>
   </div>
</div>

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

text-align