CSS zarovnání textu a směr textu

Obsah

Zarovnání textu a směr textu

V této kapitole se dozvíte o následujících vlastnostech:

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

Zarovnání textu

Vlastnost text-align se používá k nastavení vodorovného zarovnání textu.

Text může být zarovnán doleva nebo doprava, na střed nebo do bloku.

Následující příklad ukazuje text zarovnaný na střed a zarovnaný doleva a doprava (Zarovnání doleva je výchozí, pokud je směr textu zleva doprava a doprava zarovnání je výchozí, pokud je směr textu zprava doleva):

Příklad

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

Zkuste to sami →

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

Když je vlastnost text-align nastavena na "zarovnat", každý řádek je natažený tak, že každý řádek má stejnou šířku a levý a pravý okraj jsou rovné (jako v časopisech a novinách):

Příklad

div {
  text-align: justify;
}

Zkuste to sami →

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

Zarovnat text jako poslední

Vlastnost text-align-last určuje, jak zarovnat poslední řádek textu.

Příklad

Zarovnejte poslední řádek textu do tří prvků <p>:

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

Zkuste to sami →

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

Směr textu

směr a vlastnosti unicode-bidi lze použít ke změně směru textu prvku:

Příklad

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

Zkuste to sami →

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

Vertikální zarovnání

Vlastnost vertical-align nastavuje vertikální zarovnání prvku.

Příklad

Nastavte vertikální zarovnání obrázku v textu:

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

Zkuste to sami →

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

Vlastnosti zarovnání/směru textu CSS

direction: Určuje směr textu/směr psaní
text-align: Určuje vodorovné zarovnání textu
text-align-last: Určuje, jak zarovnat poslední řádek textu
unicode-bidi: Používá se spolu s vlastností direction k nastavení nebo návratu, zda má být text přepsán, aby podporoval více jazyků ve stejném dokumentu
vertical-align: Nastavuje vertikální zarovnání prvku