CSS-Textausrichtung und Textrichtung


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Textausrichtung und Textrichtung

In diesem Kapitel erfahren Sie mehr über die folgenden Eigenschaften:

  • text-align
  • text-align-last
  • direction
  • unicode-bidi
  • vertical-align

Textausrichtung

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):

Beispiel

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):

Beispiel

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>



Text zuletzt ausrichten

Die Eigenschaft text-align-last gibt an, wie die letzte Zeile eines Textes ausgerichtet wird.

Beispiel

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>




Textrichtung

Die Richtung und unicode-bidi-Eigenschaften können verwendet werden, um die Textrichtung eines Elements zu ändern:

Beispiel

 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>



Vertikale Ausrichtung

Die Eigenschaft vertical-align legt die vertikale Ausrichtung eines Elements fest.

Beispiel

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>



Die CSS-Textausrichtungs-/Richtungseigenschaften

direction

Gibt die Textrichtung/Schreibrichtung an

text-align

Gibt die horizontale Ausrichtung des Texts an

text-align-last

Gibt an, wie die letzte Zeile eines Textes ausgerichtet wird

unicode-bidi

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

vertical-align

Legt die vertikale Ausrichtung eines Elements fest