Ce face text-align
text-align controlează alinierea pe orizontală a textului în interiorul cutiei sale părinte.
Afectează nu doar literele, ci și orice elemente inline sau inline-block (cum ar fi tagurile <span>, <img> sau <a>) aflate în interior.
Valori uzuale
| Valoare | Descriere |
|---|---|
left |
Aliniere la stânga (implicit pentru limbile scrise de la stânga la dreapta). |
center |
Centrează textul pe mijlocul rândului. |
right |
Aliniere la dreapta (util pentru coloane de numere sau prețuri în tabele). |
justify |
Întinde textul pentru a atinge ambele margini (nerecomandat pe web). |
Exemple
Exemplul 1: Centrarea unui titlu și alinierea prețurilor la dreapta
Alinierea la dreapta face ca zecimalele și sumele de bani să fie ușor de comparat pe verticală.
.titlu-centrat {
text-align: center;
}
td.coloana-bani {
text-align: right;
font-variant-numeric: tabular-nums;
}Efect vizual în browser
Titlul este așezat perfect pe mijlocul paginii, iar cifrele din tabel sunt aliniate la marginea dreaptă.Greșeli frecvente
- Folosirea text-align: justify pe web; spre deosebire de tiparul pe hârtie, browserele nu știu să despartă bine în silabe în mod nativ, rezultând spații albe uriașe („râuri de alb”) între cuvinte.
- Încercarea de a centra o cutie de tip bloc (ex. un div întreg) cu text-align: center pe el însuși (text-align centrează doar conținutul din interior; pentru cutia însăși se folosește margin: auto).
Comenzi înrudite
line-height: Stabilește distanța verticală dintre rândurile de text dintr-un paragraf, asigurând o citire confortabilă.margin: Creează spațiu gol în exteriorul bordurii unui element, distanțându-l de elementele vecine.