Text-align - CSS-Tricks

Anonim

text-alignProprietatea în CSS este utilizat pentru alinierea conținutului interior al unui element al blocului.

p ( text-align: center; )

Acestea sunt valorile tradiționale pentru alinierea textului:

  • left- Valoarea implicită. Conținutul se aliniază în partea stângă.
  • right - Conținutul se aliniază pe partea dreaptă.
  • center- Centrul de conținut între marginile stânga și dreapta. Spațiul alb din partea stângă și dreaptă a fiecărei linii trebuie să fie egal.
  • justify - Spațiu de conținut astfel încât să se încadreze cât mai multe blocuri pe o linie, iar primul cuvânt de pe acea linie să fie de-a lungul marginii stângi, iar ultimul cuvânt să fie de-a lungul marginii din dreapta.
  • inherit - Valoarea va fi indiferent de elementul părinte.

„Conținutul” este folosit aici ca termen în loc de „text”, deoarece în timp ce alinierea textului afectează cu siguranță textul, afectează toate elementele blocate în linie sau în linie din acel container.

Există și două valori noi în CSS3, începutul și sfârșitul. Aceste valori facilitează suportul pentru mai multe limbi. De exemplu, engleza este o limbă de la stânga la dreapta (ltr), iar araba este o limbă de la dreapta la stânga (rtl). Utilizarea „dreapta” și „stânga” pentru valori este prea rigidă și nu se adaptează pe măsură ce direcția se schimbă. Aceste noi valori se adaptează:

  • start - La fel ca „stânga” în ltr, la fel ca „dreapta” în rtl.
  • end - La fel ca „dreapta” în ltr, la fel ca „stânga” în rtl.

Există match-parent, de asemenea , ceea ce este similar inherit, doar că noua valoare este calculată în funcție de direcția elementului curent în loc să nu știi asta.

Există câteva lucruri în specificații care nu au încă suport pentru browser. Una este valoarea „start end” care ar alinia prima linie ca și cum ar fi „start” și orice linii ulterioare ca și cum ar fi „end”. Un altul este de a da valorii un șir, cum ar fi text-align: "." start;Textul se va alinia de-a lungul primei apariții a acestuia, ca și pentru a alinia o coloană de numere de-a lungul unui punct zecimal.

Exemple

Acest text este aliniat la stânga.

Acest text este aliniat la dreapta.

Sunt centrat!

Sunt justificat. Umple spațiul exact (cu excepția ultimei linii), chiar dacă uneori trebuie să mă întind puțin.

Moștenesc alinierea părintelui meu. În acest caz, asta înseamnă stânga.

Suport pentru browser

Pentru stânga, dreapta, centru, justificați:

Crom Safari Firefox Operă IE Android iOS
Orice Orice Orice 3.5+ 3+ Orice Orice

Pentru valorile startși end:

Crom Safari Firefox Operă IE Android iOS
Orice 3.1+ 3.6+ Nici unul Nici unul Orice Orice