Zarovnání textu CSS
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 zarovnání doprava je výchozí, pokud je směr textu zprava doleva):
Příklad
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
Když je text-align
vlastnost nastavena na "zarovnat", každý řádek je roztažen tak, aby měl každý řádek stejnou šířku a levý a pravý okraj byl rovný (jako v časopisech a novinách):
Příklad
div {
text-align: justify;
}
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;
}
Směr textu
Vlastnosti direction
a
unicode-bidi
lze použít ke změně směru textu prvku:
Příklad
p {
direction: rtl;
unicode-bidi: bidi-override;
}
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;
}