text-align – Text ausrichten

Text mittig setzen – zentrieren

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.

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 teilweise beherrschen, werden Texte auf HTML-Seiten im Blocksatz schnell unschöne Lücken aufweisen. Auch die weiche Silbentrennung, die durch ­ im Quelltext des HTML-Dokuments verwendet werden kann, wird nicht von allen Browsern erkannt.

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

text-align:justify Blocksatz und Silbentrennung: un-zer-trenn-lich

Abhilfe bringt CSS hyphens, aber bis heute wird hyphens von den meisten Browsern nur mit Browser-Präfix erkannt.

Dazu dürfen wir nicht darüber hinwegsehen, dass beim Blocksatz im Printdesign die Zeilen geprüft und ggfs. von Hand nachgearbeitet werden. Bei einer Webseite hingegen wissen wir aber nie, wie lang die Zeile auf dem Gerät des Besuchers wird. Wir werden kaum einen ruhigen ausgewogenen Blocksatz für alle Monitore erreichen.

text-align-last

Die letzte Zeile eines Absatzes im Blocksatz ändern:

.blocked {
	text-align: justify;
	text-align-last: none;
}

Alle modernen Browser, IE wie immer außen vor.

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.

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

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

.vertical-table {
	display:table;
}
.vertical-table p {
	display: table-cell;
	vertical-align: middle;
	text-align:center;
}

<div class="vertical-table">
	<p>Text mit display: table und 
	display: table-cell vertikal zentrieren</p>
</div>

Blöcke zentrieren

Ganze Blöcke (z.B. ein div-Element mit Text und Bild) können nicht durch text-align ausgerichtet werden – text-align kann Layout-Elemente einer Webseite nicht in der Mitte des Browserfensters oder eines anderen Blocks positionieren.

CSS margin-left : auto; margin-right: auto zentriert Block-Elemente horizontal innerhalb ihres umfassenden Blocks.

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

.horizontal-mitte {
	margin:1em auto;
	display: table;
}
.vertikal-mitte { 
	display: table-cell; 
	vertical-align: middle;
}

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

.flex-center {
	width: 70%;
	margin: 1em auto; 
	display:flex;
	align-items:center;
	justify-content:center

<div class="flex-center">
	<div>
		<p>Blockelement innerhalb eines Blockelements</p>
		<p> … </p>
	</div>
</div>

Text an Form ausrichten

shape-outside richtet Text an Formen wie circle, polygon oder der Kontur eines Bildes mit Alpha-Maske aus. shape-outside ist keine Eigenschaft für text-align, sondern der Form oder eines Bildes.