Aby wyrównać tekst w HTML, najczęściej używa się właściwości CSS text-align. Pozwala ona precyzyjnie określić, w jaki sposób tekst ma być rozmieszczony względem krawędzi elementu – na przykład w paragrafie, nagłówku lub sekcji strony.
Właściwość text-align – podstawy
Podstawowe wartości, jakie można przypisać do właściwości text-align:
- Left – wyrównanie do lewej (domyślne ustawienie w większości języków, również po polsku);
- Right – wyrównanie do prawej;
- Center – wyśrodkowanie tekstu;
- Justify – wyrównanie tekstu do obu marginesów (justowanie), co nadaje tekstowi równą krawędź z lewej i prawej strony.
Przykładowe zastosowanie – kod HTML i CSS
Każde wyrównanie można uzyskać na dwa sposoby: bezpośrednio w znaczniku HTML (atrybut style) lub w osobnym arkuszu CSS.
Wyrównanie do lewej (domyślne)
<p style="text-align: left;"> Ten tekst jest wyrównany do lewej strony. </p> Lub w CSS:
p { text-align: left; } Wyrównanie do prawej
<p style="text-align: right;"> Ten tekst jest wyrównany do prawej strony. </p> CSS:
.prawo { text-align: right; } HTML:
<p class="prawo"> Tekst przy prawej krawędzi. </p> Wyśrodkowanie tekstu
<p style="text-align: center;"> Ten tekst jest wyśrodkowany. </p> Lub w CSS dla np. nagłówków:
h1, h2 { text-align: center; } Justowanie tekstu (do obu marginesów)
Justowanie powoduje, że tekst wypełnia całą szerokość linii – podobnie jak w czasopismach czy książkach.
<p style="text-align: justify;"> Ten tekst będzie rozciągnięty tak, by równo zaczynał się i kończył przy obu marginesach. Efekt ten stosuje się często w dłuższych akapitach. </p> W CSS:
.tekst-justowany { text-align: justify; } HTML:
<div class="tekst-justowany"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. </div> Dodatkowe zastosowania i szczegóły
- Wyrównanie tekstu w różnych elementach – można ustawiać
text-alignnie tylko dla paragrafów<p>, ale także dla nagłówków<h1>–<h6>, komórek tabel, kontenerów<div>, list i innych bloków tekstowych; - Dziedziczenie stylu – jeśli ustawisz
text-aligndla elementu rodzica (np.<div>), to wszystkie jego potomne elementy tekstowe przejmą te ustawienia, o ile nie zostaną one nadpisane; - Różnice językowe – przy stronach z układem od prawej do lewej (
dir="rtl", jak arabski lub hebrajski), domyślna wartość toright.
Przykład – różne wyrównania na stronie
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład wyrównania tekstu</title>
<style>
.do-lewej { text-align: left; }
.do-prawej { text-align: right; }
.wycentrowane { text-align: center; }
.justowane { text-align: justify; }
</style>
</head>
<body>
<h2 class="wycentrowane">Przykładowe wyrównania tekstu</h2>
<p class="do-lewej">Tekst do lewej.</p>
<p class="do-prawej">Tekst do prawej.</p>
<p class="wycentrowane">Tekst wyśrodkowany.</p>
<p class="justowane"> Justowanie długiego tekstu sprawia, że wygląda on bardziej profesjonalnie – równe marginesy z obu stron poprawiają czytelność dużych bloków treści. </p>
</body>
</html>
Podsumowanie najważniejszych wartości text-align
| Wartość | Efekt | Zastosowanie |
|---|---|---|
| left | wyrównanie do lewej | teksty domyślne, strony polskie |
| right | wyrównanie do prawej | podpisy, liczby w tabelach |
| center | wyśrodkowanie tekstu | nagłówki, tytuły, stopki |
| justify | wyrównanie do obu marginesów | artykuły, długie akapity, gazety |
Wskazówka – aby skutecznie wyrównywać tekst na stronie, najlepiej korzystać z CSS – zapewnia to spójność stylów oraz ułatwia zarządzanie wyglądem zarówno pojedynczych elementów, jak i całego serwisu.
