Własność CSS text-align

Własność CSS text-align to własność zbiorcza określająca sposób wyrównania tekstu w elementach blokowych i komórkach tabel HTML.

Obejmuje następujące własności indywidualne:

• text-align-all – określa wyrównanie wszystkich wierszy tekstu oprócz ostatniego.
• text-align-last – określa wyrównanie ostatniego wiersza tekstu.

Własność text-align i obejmowane przez nią własności indywidualne należą do logicznych własności CSS. To znaczy, że w rzeczywistości określają wyrównanie tekstu wzdłuż osi śródliniowej, która w zależności od języka może biec od lewej do prawej (jak np. w języku polskim, angielskim czy francuskim) lub z góry na dół (jak np. w języku japońskim).

Wartości i składnia

Własność text-align jako wartość przyjmuje jedno z następujących słów kluczowych:

center

Wyśrodkowanie tekstu.

end

Wyrównanie do logicznej krawędzi końcowej elementu (w przypadku tekstu w języku polskim jest to prawa krawędź elementu).

justify

Wyjustowanie tekstu zgodnie z ustawieniem własności text-justify. Ostatni wiersz pozostawia wyrównany do logicznej krawędzi początkowej elementu (do lewej w przypadku tekstu w języku polskim) – ustawienie to można zmienić za pomocą własności text-align-last.

justify-all

Wyjustowanie całego tekstu, włącznie z ostatnim wierszem.

left

Wyrównanie do lewej.

match-parent

Działa jak inherit, tylko wartości start i end wylicza zgodnie z kierunkiem tekstu elementu nadrzędnego.

right

Wyrównanie do prawej.

start

Wyrównanie do logicznej krawędzi początkowej elementu (w przypadku tekstu w języku polskim jest to lewa krawędź elementu).

Przykłady

Poniżej znajduje się kilka przykładów ilustrujących sposób użycia i działanie własności CSS text-align.

Wyśrodkowanie tekstu CSS

Jak wyśrodkować tekst CSS? Aby wyśrodkować tekst w CSS, należy własności text-align nadać wartość center. Poniższy przykład ilustruje proste środkowanie tekstu CSS:

<style>
p {
  text-align: center;
  width: 180px;
  padding: 40px;
}
</style>
...
<p>Niektóre istoty są jak zera. Trzeba im cyfry, która by ich poprzedzała, a wówczas nicość ich nabiera dziesięciokrotnej wartości.</p>

Efekt:

Justowanie tekstu

Aby wyjustować tekst w CSS, należy własności text-align nadać wartość justify. Spowoduje to wyjustowanie wszystkich wierszy tekstu oprócz ostatniego. Aby wyjustować także ostatni wiersz, należy dodać własność text-align-last i nadać jej wartość justify (niestety obecnie wartość justify-all własności text-align nie jest obsługiwana przez żadną przeglądarkę). Spójrz na poniższy przykład:

p {
  text-align: justify;
  width: 240px;
  border: 1px solid black;
  padding: 10px
}

Efekt:

W tym przypadku ostatni wiersz tekstu jest wyrównany do lewej. A teraz spójrz na następujący przykład:

p {
  text-align: justify;
  text-align-last: justify;
  width: 240px;
  border: 1px solid black;
  padding: 10px
}

Wynik:

Teraz wyjustowany został także ostatni wiersz tekstu.

Podsumowanie