Beispiel:CSS2 text-align.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!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:SELFHTML-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>
<h1>Horizontale Ausrichtung mit <code>text-align</code></h1>
	<p class="left">Dieser Text wird linksbündig ausgerichtet.</p>
	<hr>
	<p class="right">Dieser Text wird rechtsbündig ausgerichtet.</p>
	<hr>
	<p class="center">Dieser Text wird zentriert ausgerichtet.</p>
	<p class="center"> <img src="/images/5/54/Landscape.svg" alt="Symbolbild" width="200">		</p>
<hr>
			<section class="left"> Dies ist linksbündiger Kontext.
				<p class="justify">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.
					<br>
					Die letzte Zeile wird ausgerichtet im Kontext des
					Elternelements.
				</p>
			</section>
			<hr>
			<section class="right"> Dies ist rechtsbündiger Kontext.
				<p class="justify">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.
					<br>
					Die letzte Zeile wird ausgerichtet im Kontext des
					Elternelements.
				</p>
			</section>
			<hr>
			<section class="center"> Dies ist zentrierter Kontext.
				<p class="justify">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.
					<br>
					Die letzte Zeile wird ausgerichtet im Kontext des
					Elternelements.
				</p>
			</section>
			<hr>
			<section>Der folgende Absatz muss trotz der expliziten
				Schreibrichtung von rechts nach links linksbündig
				erscheinen.
			</section>
			<p class="left" dir="rtl">עברית</p>
			<hr>
			<section>Der folgende Absatz muss der Schreibrichtung
				folgend rechtsbündig erscheinen.
			</section>
			<p class="start" dir="rtl">עברית</p>
			<hr>
			<section>Der folgende Absatz muss der Schreibrichtung
				folgend linksbündig erscheinen.
			</section>
			<p class="end" dir="rtl">עברית</p>
		</main>
	</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS2_text-align.html&oldid=92217“