Proprietà CSS text-align

Definizione e uso

L'attributo text-align determina il modo di allineamento orizzontale del testo all'interno dell'elemento.

L'attributo imposta il modo di allineamento orizzontale del testo all'interno degli elementi bloccati specificando con quale punto di riferimento allineare la riga di testo. Permettendo all'agente utente di regolare lo spazio tra le lettere e le parole nel contenuto della riga, supporta il valore justify; i diversi agenti utente possono ottenere risultati diversi.

Vedi anche:

Tutorial CSS:Testo CSS

Manuale HTML DOM:Proprietà textAlign

Esempio

Impostare il modo di allineamento del testo degli elementi h1, h2, h3:

h1 {text-align:center;}
h2 {text-align:left;}
h3 {text-align:right;}

Prova tu stesso

Sintassi CSS

text-align: left|right|center|justify|initial|inherit;

Valore dell'attributo

Valore Descrizione
left Allineare il testo a sinistra. Valore predefinito: deciso dal browser.
right Allineare il testo a destra.
center Allineare il testo al centro.
justify Realizzare l'effetto di testo allineato a due estremità.
inherit Specificare che l'attributo text-align deve essere ereditato dal genitore.

Il valore justify

L'ultimo attributo di allineamento orizzontale è justify, che introduce alcuni problemi suoi.

Il valore justify allinea entrambi i lati del testo. Nei testi allineati a due estremità, entrambi i lati delle righe di testo sono posizionati sui bordi interni dell'elemento genitore. Poi, aggiustare lo spazio tra le parole e le lettere in modo che la lunghezza di ogni riga sia uguale. Potrebbe essere notato che i testi allineati a due estremità sono comuni nel campo della stampa. Tuttavia, nella CSS, ci sono molte considerazioni da fare.

Determinare come l'utente diagenti (non la CSS) deve allungare il testo allineato a due estremità per riempire lo spazio tra i bordi laterali del genitore. Ad esempio, alcuni browser potrebbero aggiungere spazio extra tra le parole, mentre altri potrebbero distribuire uniformemente lo spazio extra tra le lettere (tuttavia, la specifica CSS sottolinea che se proprietà letter-spacingSpecificato come valore di lunghezza, "l'utente di代理 non può aumentare o ridurre ulteriormente lo spazio tra i caratteri"). Alcuni utenti di代理 potrebbero ridurre lo spazio di alcune righe, rendendo il testo più compatto. Tutte queste pratiche influenzano l'aspetto dell'elemento, persino la sua altezza, a seconda di quanto l'allineamento dell'utente diagenti influenzi le righe di testo.

La CSS non specifica nemmeno come gestire i trattini (nota 1). La maggior parte dei testi allineati a due estremità utilizza i trattini per dividere le parole lunghe in due righe, riducendo lo spazio tra le parole e migliorando l'aspetto delle righe di testo. Tuttavia, poiché la CSS non definisce il comportamento dei trattini, gli utenti代理 probabilmente non aggiungeranno automaticamente i trattini. Pertanto, i testi allineati a due estremità nella CSS sembrano meno belli da stampare, specialmente quando gli elementi sono troppo stretti per contenere solo alcune parole per riga. Certo, è possibile utilizzare elementi di design stretti, ma è necessario fare attenzione ai loro svantaggi corrispondenti.

Nota 1:La CSS non specifica come gestire i trattini, poiché le regole per i trattini variano da una lingua all'altra. La specifica non ha cercato di mediare tali regole probabilmente incomplete, ma ha semplicemente omesso questa questione.

Dettagli tecnici

Valore predefinito: Se l'attributo direction è ltr, il valore predefinito è left; se direction è rtl, è right.
Ereditarietà: sì
Versione: CSS1
Sintassi JavaScript: oggetto.style.textAlign="right"

Altri esempi

Allineamento del testo
Questo esempio dimostra come allineare il testo.

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.

Chrome IE / Edge Firefox Safari Opera
1.0 3.0 1.0 1.0 3.5