CSS-textjustering och textriktning


Innehållsförteckning

    Visa innehållsförteckning


Textjustering och textriktning

I det här kapitlet kommer du att lära dig om följande egenskaper:

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

Textjustering

Egenskapen text-align används för att ställa in den horisontella justeringen av en text.

En text kan vara vänster- eller högerjusterad, centrerad eller justerad.

Följande exempel visar mittjusterad och vänster- och högerjusterad text (vänsterjustering är standard om textriktningen är vänster till höger och höger justering är standard om textriktningen är höger till vänster):

Exempel

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

Prova själv →

<!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 egenskapen text-align är inställd på "justify", är varje rad sträckt så att varje linje har samma bredd, och vänster och höger marginaler är rak (som i tidningar och tidningar):

Exempel

div {
  text-align: justify;
}

Prova själv →

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

Egenskapen text-align-last anger hur den sista raden i en text ska justeras.

Exempel

Justera den sista textraden i tre <p>-element:

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

Prova själv →

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




Textriktning

riktningen och unicode-bidi-egenskaper kan användas för att ändra textriktningen för ett element:

Exempel

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

Prova själv →

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



Vertikal inriktning

Egenskapen vertical-align anger den vertikala justeringen av ett element.

Exempel

Ställ in den vertikala justeringen av en bild i en text:

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

Prova själv →

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



Egenskaperna för CSS-textjustering/riktning

direction

Anger textriktning/skrivriktning

text-align

Anger den horisontella justeringen av text

text-align-last

Anger hur den sista raden i en text ska justeras

unicode-bidi

Används tillsammans med egenskapen direction för att ställa in eller returnera om texten ska åsidosättas för att stödja flera språk i samma dokument

vertical-align

Ställer in den vertikala justeringen av ett element