Beispiel:Text-align.html
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css" /> <title>text-align</title> <style> p { border:thin solid #ccc; } hr { border-color:#ccc; } .left { text-align:left; } .right { text-align:right; } .center { text-align:center; } .justify { text-align:justify; } .start { text-align:start; } .end { text-align:end; } </style> </head> <body>
Horizontale Ausrichtung mit text-align
Dieser Text wird linksbündig ausgerichtet.
Dieser Text wird rechtsbündig ausgerichtet.
Dieser Text wird zentriert ausgerichtet.
<img src="/images/5/54/Landscape.svg" alt="Symbolbild" width="200">
<section class="left"> Dies ist linksbündiger Kontext.
Dieser Text wird im Blocksatz
ausgerichtet. Damit das besser zur Geltung kommt,
folgt hier noch etwas Text. Problematisch bei
Blocksatz sind die unterschiedlichen Wortabstände,
die das Lesen gerade bei schmalen Zeilenlängen
erschweren. Eine Silbentrennung von zu langen
Wörtern ist mit CSS
<a href="https://wiki.selfhtml.org/wiki/Hyphens">
hyphens
</a>
möglich, birgt aber auch Schwierigkeiten.
Die letzte Zeile wird ausgerichtet im Kontext des
Elternelements.
</section>
<section class="right"> Dies ist rechtsbündiger Kontext.
Dieser Text wird im Blocksatz
ausgerichtet. Damit das besser zur Geltung kommt,
folgt hier noch etwas Text. Problematisch bei
Blocksatz sind die unterschiedlichen Wortabstände,
die das Lesen gerade bei schmalen Zeilenlängen
erschweren. Eine Silbentrennung von zu langen
Wörtern ist mit CSS
<a href="https://wiki.selfhtml.org/wiki/Hyphens">
hyphens
</a>
möglich, birgt aber auch Schwierigkeiten.
Die letzte Zeile wird ausgerichtet im Kontext des
Elternelements.
</section>
<section class="center"> Dies ist zentrierter Kontext.
Dieser Text wird im Blocksatz
ausgerichtet. Damit das besser zur Geltung kommt,
folgt hier noch etwas Text. Problematisch bei
Blocksatz sind die unterschiedlichen Wortabstände,
die das Lesen gerade bei schmalen Zeilenlängen
erschweren. Eine Silbentrennung von zu langen
Wörtern ist mit CSS
<a href="https://wiki.selfhtml.org/wiki/Hyphens">
hyphens
</a>
möglich, birgt aber auch Schwierigkeiten.
Die letzte Zeile wird ausgerichtet im Kontext des
Elternelements.
</section>
<section>Der folgende Absatz muss trotz der expliziten Schreibrichtung von rechts nach links linksbündig erscheinen. </section>
עברית
<section>Der folgende Absatz muss der Schreibrichtung folgend rechtsbündig erscheinen. </section>
עברית
<section>Der folgende Absatz muss der Schreibrichtung folgend linksbündig erscheinen. </section>
עברית
</main> </body> </html>
