text-align – Text ausrichten

CSS text-align: Text ausrichten

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 nicht alle Brower eine gute Silbentrennung unterstützen – insbesondere nicht für jede Sprache. Ohne Silbentrennung zeigt Text im Blocksatz unnatürlich große Lücken.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Text mittig setzen – zentrieren

demobild

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 teilweise 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 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
}

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

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

text-align-last

Die letzte Zeile eines Absatzes im Blocksatz ändern:

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

Beim Blocksatz mit text-align: justify wird die letzte Zeile eines Absatzes normal gesetzt – also nicht durch Wortabstände auf die verfügbare Breite gedehnt.
text-align-last behandelt diese letzte Zeile und kann die letzte Zeile vor einem Zeilenumbruch rechts, zentriert oder ebenfalls im Blocksatz ausrichten.

Alle modernen Browser außer Safari.

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;
}
html
<div class="vertikal-flex">
	<p>Textvertikal zentrieren</p>
</div>

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

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.

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>

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.

Oat cake lollipop dragée biscuit cheesecake pudding soufflé pastry. Tootsie roll sesame snaps brownie sugar plum chupa chups candy canes.

Chocolate cake cake dessert cookie sesame snaps. Icing sugar plum caramels pie sweet apple pie carrot cake bonbon topping.

Wafer candy canes carrot cake topping chupa chups cupcake cookie. Carrot cake liquorice croissant gingerbread. Sweet roll candy chocolate bar halvah wafer sweet dessert brownie soufflé.