La text-alignproprietà in CSS viene utilizzata per allineare il contenuto interno di un elemento di blocco.
p ( text-align: center; )Questi sono i valori tradizionali per l'allineamento del testo:
left- Il valore predefinito. Il contenuto si allinea lungo il lato sinistro.right- Il contenuto si allinea lungo il lato destro.center- Centro dei contenuti tra i bordi sinistro e destro. Lo spazio bianco sui lati sinistro e destro di ogni linea dovrebbe essere uguale.justify- Spazio del contenuto in modo tale che il maggior numero di blocchi possibile su una riga e la prima parola su quella riga sia lungo il bordo sinistro e l'ultima parola sia lungo il bordo destro.inherit- Il valore sarà qualunque sia l'elemento genitore.
"Contenuto" è usato qui come termine invece di "testo", perché mentre l'allineamento del testo influisce sicuramente sul testo, influisce su tutti gli elementi in linea o blocco in linea in quel contenitore.
Ci sono anche due nuovi valori in CSS3, start e end. Questi valori semplificano il supporto di più lingue Ad esempio, l'inglese è una lingua da sinistra a destra (ltr) e l'arabo è una lingua da destra a sinistra (rtl). L'uso di "destra" e "sinistra" per i valori è troppo rigido e non si adatta al cambio di direzione. Questi nuovi valori si adattano:
start- Come "sinistra" in ltr, come "destra" in rtl.end- Come "right" in ltr, come "left" in rtl.
C'è anche match-parent, che è simile a inherit, solo che il nuovo valore viene calcolato rispetto alla direzione dell'elemento corrente invece di, sai, non farlo.
Ci sono alcune cose nelle specifiche che non hanno ancora il supporto del browser. Uno è il valore "inizio fine" che allinea la prima riga come se fosse "inizio" e le righe successive come se fosse "fine". Un altro è dare al valore una stringa, come text-align: "." start;Il testo sarà allineato lungo la prima occorrenza di quello, come per allineare una colonna di numeri lungo un punto decimale.
Esempi
Questo testo è allineato a sinistra.
Questo testo è allineato a destra.
Sono centrato!
Sono giustificato. Riempio lo spazio esattamente (tranne sull'ultima riga), anche se a volte devo allungare un po '.
Eredito l'allineamento dei miei genitori. In questo caso, significa sinistra.
Supporto browser
Per sinistra, destra, centro, giustifica:
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Qualunque | Qualunque | Qualunque | 3.5+ | 3+ | Qualunque | Qualunque |
Per i valori starte end:
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Qualunque | 3.1+ | 3.6+ | Nessuna | Nessuna | Qualunque | Qualunque |