In diesem Kapitel erfahren Sie mehr über die folgenden Eigenschaften:
text-align
text-align-last
direction
unicode-bidi
vertical-align
Die Eigenschaft text-align
wird verwendet, um die horizontale Ausrichtung eines Textes festzulegen.
Ein Text kann links- oder rechtsbündig, zentriert oder im Blocksatz ausgerichtet sein.
Das folgende Beispiel zeigt mittig ausgerichteten sowie links- und rechtsbündig ausgerichteten Text (Die linke Ausrichtung ist Standard, wenn die Textrichtung von links nach rechts und rechts ist Ausrichtung ist Standard, wenn die Textrichtung von rechts nach links ist):
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
</style>
</head>
<body>
<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>
<p>The three headings above are aligned center, left and right.</p>
</body>
</html>
Wenn die Eigenschaft text-align
auf „justify“ gesetzt ist, wird jede Zeile ausgerichtet gestreckt, sodass jede Linie gleich breit ist und der linke und rechte Rand gleich sind gerade (wie in Zeitschriften und Zeitungen):
div {
text-align: justify;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 10px;
width: 200px;
height: 200px;
text-align: justify;
}
</style>
</head>
<body>
<h1>Example text-align: justify</h1>
<p>The text-align: justify; value stretches the lines so that each line has equal width (like in newspapers and magazines).</p>
<div>
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
</div>
</body>
</html>
Die Eigenschaft text-align-last
gibt an, wie die letzte Zeile eines Textes ausgerichtet wird.
Richten Sie die letzte Textzeile in drei <p>-Elementen aus:
p.a
{
text-align-last: right;
}
p.b
{
text-align-last: center;
}
p.c
{
text-align-last: justify;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
p.a {
text-align-last: right;
}
p.b {
text-align-last: center;
}
p.c {
text-align-last: justify;
}
</style>
</head>
<body>
<h1>The text-align-last Property</h1>
<h2>text-align-last: right:</h2>
<p class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<h2>text-align-last: center:</h2>
<p class="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<h2>text-align-last: justify:</h2>
<p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</body>
</html>
Die Richtung
und unicode-bidi
-Eigenschaften können verwendet werden, um die Textrichtung eines Elements zu ändern:
p {
direction: rtl;
unicode-bidi: bidi-override;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<p>This is the default text direction.</p>
<p class="ex1">This is right-to-left text direction.</p>
</body>
</html>
Die Eigenschaft vertical-align
legt die vertikale Ausrichtung eines Elements fest.
Legen Sie die vertikale Ausrichtung eines Bildes in einem Text fest:
img.a {
vertical-align: baseline;
}
img.b {
vertical-align: text-top;
}
img.c {
vertical-align:
text-bottom;
}
img.d {
vertical-align: sub;
}
img.e {
vertical-align: super;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
img.a {
vertical-align: baseline;
}
img.b {
vertical-align: text-top;
}
img.c {
vertical-align: text-bottom;
}
img.d {
vertical-align: sub;
}
img.e {
vertical-align: super;
}
</style>
</head>
<body>
<h1>The vertical-align Property</h1>
<h2>vertical-align: baseline (default):</h2>
<p>An <img class="a" src="sqpurple.gif" width="9" height="9"> image with a default alignment.</p>
<h2>vertical-align: text-top:</h2>
<p>An <img class="b" src="sqpurple.gif" width="9" height="9"> image with a text-top alignment.</p>
<h2>vertical-align: text-bottom:</h2>
<p>An <img class="c" src="sqpurple.gif" width="9" height="9"> image with a text-bottom alignment.</p>
<h2>vertical-align: sub:</h2>
<p>An <img class="d" src="sqpurple.gif" width="9" height="9"> image with a sub alignment.</p>
<h2>vertical-align: sup:</h2>
<p>An <img class="e" src="sqpurple.gif" width="9" height="9"> image with a super alignment.</p>
</body>
</html>
Gibt die Textrichtung/Schreibrichtung an
Gibt die horizontale Ausrichtung des Texts an
Gibt an, wie die letzte Zeile eines Textes ausgerichtet wird
Wird zusammen mit der Richtungseigenschaft verwendet, um festzulegen oder zurückzugeben, ob der Text überschrieben werden soll, um mehrere Sprachen im selben Dokument zu unterstützen
Legt die vertikale Ausrichtung eines Elements fest