Kurs HTML

Wprowadzenie: Poziome rozmieszczenie tekstu

Właściwość text-align w CSS kontroluje **poziome wyrównanie** treści wewnątrz elementu blokowego lub komórki tabeli. Pozwala ona decydować, czy tekst ma być wyrównany do lewej, prawej, środka, czy też wyjustowany (wyrównany do obu marginesów).

Działa ona na elementy liniowe (inline) i tekst znajdujące się wewnątrz kontenera blokowego, do którego zastosowano tę właściwość.

Wartości dla text-align

Najczęściej używane wartości dla text-align to:

• left: Wyrównuje tekst do lewej krawędzi kontenera. Jest to **wartość domyślna** dla języków pisanych od lewej do prawej (jak polski czy angielski).
• right: Wyrównuje tekst do prawej krawędzi kontenera. Domyślna dla języków pisanych od prawej do lewej (jak arabski czy hebrajski).
• center: Wyśrodkowuje tekst w poziomie wewnątrz kontenera.
• justify: Justuje tekst, czyli wyrównuje go jednocześnie do lewej i prawej krawędzi kontenera poprzez dostosowanie odstępów między słowami i/lub literami. Ostatnia linia akapitu jest zazwyczaj wyrównywana do lewej (lub zgodnie z kierunkiem tekstu).

Istnieją również wartości związane z kierunkiem tekstu (start, end), które są bardziej elastyczne w kontekście internacjonalizacji, ale left, right, center i justify są najpowszechniejsze.

.do-lewej {
  text-align: left;
}

.do-prawej {
  text-align: right;
}

.do-srodka {
  text-align: center;
}

.justowany {
  text-align: justify;
}

/* Przykład zastosowania */
h1 {
  text-align: center; /* Wyśrodkowanie głównego nagłówka */
}

p {
  text-align: justify; /* Justowanie tekstu w akapitach */
}

.podpis-obrazka {
  text-align: right; /* Podpis wyrównany do prawej */
  font-size: 0.9rem;
  color: gray;
}Kopiuj

Jak działa text-align?

• Właściwość text-align stosuje się do **elementu blokowego** (np. <p>, <div>, <h1>).
• Wpływa ona na wyrównanie **treści liniowej (inline content)** wewnątrz tego bloku. Treść liniowa obejmuje tekst oraz elementy inline (np. <span>, <a>, <img>, <strong>).
• text-align **nie służy** do wyrównywania samych elementów blokowych względem ich rodzica. Do tego celu używa się innych technik, np. ustawienia marginesów (margin: 0 auto; dla centrowania bloku) lub Flexbox/Grid.

Przykład: Centrowanie obrazka

Jeśli obrazek (<img>, który jest elementem inline lub inline-block) znajduje się wewnątrz diva, można go wycentrować, stosując text-align: center; do tego diva.

<div class="kontener-obrazka">
    <img src="logo.png" alt="Logo">
</div>Kopiuj

.kontener-obrazka {
  text-align: center; /* Wyśrodkuje obrazek (element inline-block) wewnątrz diva */
  border: 1px solid lightgray; /* Dla wizualizacji */
}

.kontener-obrazka img {
  /* display: inline-block; jest domyślne dla img, ale można jawnie ustawić */
}Kopiuj

Uwagi dotyczące justowania (justify)

Justowanie tekstu (text-align: justify;) może wyglądać estetycznie w druku, ale w internecie bywa problematyczne:

• "Rzeki" spacji: Aby wyrównać tekst do obu marginesów, przeglądarka musi rozciągać odstępy między słowami. W wąskich kolumnach lub przy długich słowach może to prowadzić do powstawania dużych, nieregularnych przerw między słowami (tzw. "rzek"), które utrudniają czytanie.
• Czytelność: Niektórzy użytkownicy, zwłaszcza osoby z dysleksją, mogą mieć większe trudności z czytaniem tekstu justowanego niż wyrównanego do lewej (który ma stałe odstępy między słowami i "poszarpany" prawy margines).
• Dzielenie wyrazów: Efekt justowania można poprawić, stosując mechanizmy dzielenia wyrazów (CSS hyphens), ale ich wsparcie i implementacja mogą się różnić.

Z tych powodów, wielu projektantów preferuje wyrównanie tekstu do lewej (text-align: left;) dla dłuższych bloków tekstu na stronach internetowych, rezerwując justowanie dla specyficznych przypadków lub projektów przypominających układ gazetowy.