CSS-tekstjustering og tekstretning

Indholdsfortegnelse

Tekstjustering og tekstretning

I dette kapitel lærer du om følgende egenskaber:

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

Tekstjustering

Egenskaben text-align bruges til at indstille den vandrette justering af en tekst.

En tekst kan være venstre- eller højrejusteret, centreret eller justeret.

Følgende eksempel viser centerjusteret og venstre- og højrejusteret tekst (venstrejustering er standard, hvis tekstretningen er venstre mod højre og højre justering er standard, hvis tekstretningen er højre mod venstre):

Eksempel

h1 {
  text-align: center;
}
h2 {
  text-align: left;
}
h3 {
  text-align: right;
}

Prøv det selv →

<!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>

Når egenskaben text-align er indstillet til "justify", er hver linje strakt, så hver linje har samme bredde, og venstre og højre marginer er lige (som i magasiner og aviser):

Eksempel

div {
  text-align: justify;
}

Prøv det selv →

<!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>

Tekstjustering sidst

Egenskaben text-align-last angiver, hvordan den sidste linje i en tekst skal justeres.

Eksempel

Juster den sidste tekstlinje i tre <p>-elementer:

 p.a
{
   
text-align-last: right;
}
p.b
{
   
text-align-last: center;
}
p.c
{
    text-align-last: justify;
}

Prøv det selv →

<!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>

Tekstretning

retningen og unicode-bidi egenskaber kan bruges til at ændre tekstretningen for et element:

Eksempel

 p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

Prøv det selv →

<!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>

Lodret justering

Egenskaben vertical-align angiver den lodrette justering af et element.

Eksempel

Indstil den lodrette justering af et billede i en tekst:

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

Prøv det selv →

<!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>

CSS-tekstjustering/retningsegenskaberne

direction: Angiver tekstretningen/skriveretningen
text-align: Angiver den vandrette justering af tekst
text-align-last: Angiver, hvordan den sidste linje i en tekst skal justeres
unicode-bidi: Bruges sammen med retningsegenskaben til at indstille eller returnere, om teksten skal tilsidesættes for at understøtte flere sprog i det samme dokument
vertical-align: Indstiller den lodrette justering af et element