Wyrównanie tekstu CSS
Wyrównanie tekstu
Właściwość text-align
służy do ustawienia poziomego wyrównania tekstu.
Tekst może być wyrównany do lewej lub do prawej, wyśrodkowany lub wyjustowany.
Poniższy przykład pokazuje wyrównany do środka oraz wyrównany do lewej i do prawej (wyrównanie do lewej jest domyślne, jeśli kierunek tekstu jest od lewej do prawej, a wyrównanie do prawej jest domyślne, jeśli kierunek tekstu jest od prawej do lewej):
Przykład
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
Gdy text-align
właściwość jest ustawiona na „justify”, każda linia jest rozciągana tak, aby każda linia miała równą szerokość, a lewy i prawy margines były proste (jak w czasopismach i gazetach):
Przykład
div {
text-align: justify;
}
Wyrównaj tekst do ostatniego
Właściwość text-align-last
określa sposób wyrównania ostatniego wiersza tekstu.
Przykład
Wyrównaj ostatni wiersz tekstu w trzech <p> elementach:
p.a
{
text-align-last: right;
}
p.b
{
text-align-last: center;
}
p.c
{
text-align-last: justify;
}
Kierunek tekstu
Właściwości direction
i
unicode-bidi
mogą służyć do zmiany kierunku tekstu elementu:
Przykład
p {
direction: rtl;
unicode-bidi: bidi-override;
}
Wyrównanie w pionie
Właściwość vertical-align
ustawia pionowe wyrównanie elementu.
Przykład
Ustaw pionowe wyrównanie obrazu w tekście:
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;
}