Aby wyrównać tekst do lewej w HTML, należy użyć właściwości text-align z wartością left. Taki sposób pozwala na pełną kontrolę nad pozycją tekstu w wybranych elementach na stronie internetowej, zarówno za pomocą atrybutów wbudowanych w HTML, jak i dedykowanych arkuszy stylów CSS.
Domyślne wyrównanie tekstu w HTML
W większości przypadków tekst w języku HTML jest domyślnie wyrównywany do lewej w większości znaczników, np. <p>, <div>, <span>. Jeśli jednak chcesz wymusić to ustawienie lub nadpisać styl pochodzący z innych reguł, użyj właściwości text-align.
Wyrównanie tekstu do lewej za pomocą atrybutu style (html i css inline)
Można wyrównać tekst w prosty sposób, dodając do dowolnego znacznika HTML atrybut style z wartością text-align: left;.
Przykład użycia –
<p style="text-align: left;"> To jest tekst wyrównany do lewej. </p>
Ten sposób sprawdza się w przypadkach, gdy chcesz wyrównać pojedynczy akapit lub krótki fragment tekstu.
Wyrównanie całych sekcji lub wielu elementów za pomocą zewnętrznego css
Jeśli zależy Ci na spójności oraz lepszej organizacji kodu, zalecane jest stosowanie styli CSS, szczególnie przy większych projektach.
Przykład zastosowania klas css –
.wyrownaj-lewo { text-align: left; }
<div class="wyrownaj-lewo"> Ten tekst również będzie wyrównany do lewej. </div>
Możesz też wyrównać do lewej wszystkie akapity na stronie:
p { text-align: left; }
Wyrównanie tekstu w różnych elementach html
Możesz wyrównywać do lewej tekst w –
- akapitach (
<p>), - nagłówkach (
<h1>,<h2>, …), - listach (
<ul>,<ol>,<li>), - elementach blokowych (
<div>,<section>,<article>, itp.).
Przykład –
<h2 style="text-align: left;">Nagłówek wyrównany do lewej</h2>
<ul style="text-align: left;">
<li>Pierwszy punkt</li>
<li>Drugi punkt</li>
</ul>
Różnica pomiędzy wyrównaniem inline a zewnętrznym stylem
| Sposób | Zalety | Wady |
|---|---|---|
style inline |
Szybkie, proste dla pojedynczego tekstu | Mało elastyczne, trudne do zarządzania w dużych projektach |
| CSS | Łatwo zarządzać wyglądem na całej stronie, lepsza skalowalność | Wymaga dodatkowego pliku lub sekcji <style> |
Porady praktyczne
- Domyślne wyrównanie do lewej – dotyczy większości sytuacji; jednak w środowiskach używających resetów CSS, frameworków lub niestandardowych styli może wystąpić konieczność jawnego zadeklarowania
text-align: left; - Wyrównanie do lewej – jest szczególnie zalecane dla języków pisanych od lewej do prawej (np. polski, angielski); w przypadku języków rtl należy odpowiednio dostosować stylowanie;
- Stosowanie klas css – pozwala na szybkie wprowadzanie zmian w dużych serwisach internetowych, bez konieczności edytowania każdego elementu z osobna.
Najważniejsze fragmenty kodu do skopiowania
HTML z atrybutem inline –
<p style="text-align: left;">Tekst do lewej.</p>
CSS klasy –
.left-align { text-align: left; }
<div class="left-align">Tekst do lewej.</div>
Wyrównanie tekstu do lewej strony jest jednym z najprostszych i najczęściej wykorzystywanych zabiegów w projektowaniu stron internetowych – pomaga zadbać o czytelność treści i dobry wygląd witryny. Wybierając odpowiednią metodę (inline lub CSS), dostosujesz sposób wyrównania do możliwości swojego projektu i łatwo zadbasz o spójność prezentacji tekstu.
