CSS szövegigazítás és szövegirány

Tartalomjegyzék

Szöveg igazítása és szövegiránya

Ebben a fejezetben a következő tulajdonságokat ismerheti meg:

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

Szöveg igazítása

A text-align tulajdonság a szöveg vízszintes igazításának beállítására szolgál.

A szöveg lehet balra vagy jobbra igazítva, középre igazítva vagy sorkizárva.

A következő példa középre igazított, valamint balra és jobbra igazított szöveget mutat be (A balra igazítás az alapértelmezett, ha a szöveg iránya balról jobbra és jobbra van az igazítás az alapértelmezett, ha a szöveg iránya jobbról balra):

Példa

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

Próbálja ki Ön is →

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

Ha a text-align tulajdonság "justify" értékre van állítva, minden sor úgy nyújtva, hogy minden vonal azonos szélességű legyen, a bal és jobb margó pedig egyenlő legyen egyenes (mint a magazinokban és újságokban):

Példa

div {
  text-align: justify;
}

Próbálja ki Ön is →

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

Szöveg utolsó igazítása

A text-align-last tulajdonság határozza meg, hogyan kell igazítani a szöveg utolsó sorát.

Példa

Igazítsa a szöveg utolsó sorát három <p> elemhez:

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

Próbálja ki Ön is →

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

Szöveg iránya

Az irány és Az unicode-bidi tulajdonságok segítségével megváltoztathatjuk egy elem szövegirányát:

Példa

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

Próbálja ki Ön is →

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

Függőleges igazítás

A vertical-align tulajdonság egy elem függőleges igazítását állítja be.

Példa

Állítsa be a kép függőleges igazítását a szövegben:

 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óbálja ki Ön is →

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

A CSS szövegigazítás/irány tulajdonságai

direction: Meghatározza a szöveg irányát/írási irányát
text-align: Meghatározza a szöveg vízszintes igazítását
text-align-last: Meghatározza a szöveg utolsó sorának igazítását
unicode-bidi: Az irány tulajdonsággal együtt használva annak beállítására vagy visszaadására, hogy felül kell-e írni a szöveget, hogy több nyelvet támogasson ugyanabban a dokumentumban
vertical-align: Beállítja egy elem függőleges igazítását