Home-theater-designers
Una delle prime caratteristiche di cui tutti gli sviluppatori hanno appreso quando hanno preso confidenza con l'elaborazione di testi è stata l'allineamento del testo. Quel piccolo strumento è stato vitale sia per i tipografi professionisti che per i designer di volantini dilettanti. Non sorprende che i CSS supportino l'allineamento del testo quando si tratta di web design.
Il allineare il testo proprietà, insieme a uno o due altri, controlla come un elemento allinea orizzontalmente il suo testo. Oltre alle nozioni di base, i browser stanno implementando lentamente più specifiche, ma il supporto completo varia. Scopri come allineare il testo e quali funzionalità supportano oggi i browser più comuni.
Le basi della proprietà di allineamento del testo CSS
L'allineamento è uno dei termini tipografici più familiari. Nel contesto del CSS, allineare il testo si riferisce all'allineamento orizzontale.
L'allineamento del testo orizzontale si applica solo ai contenitori di blocchi. Questi sono elementi a larghezza intera come paragrafi e div. Usando il allineare il testo proprietà su un elemento in linea come in non avrà alcun effetto. Puoi anche allineare gli elementi dell'elenco e le celle della tabella:
widget meteo desktop per Windows 10
Per impostazione predefinita, in una lingua da sinistra a destra (ne parleremo più avanti), il testo si allinea a sinistra:
In CSS, questo è lo stesso di:
p { text-align: left; }O:
p { text-align: start; }Imparentato: Cosa sono i fogli di stile a cascata e a cosa servono i CSS?
Puoi usare altri valori per il allineare il testo proprietà per modificare l'allineamento orizzontale. I valori più comuni sono familiari dalle app di elaborazione testi:
text-align: left
text-align: center
text-align: rightUsa la giustificazione per allineare i bordi sinistro e destro
Un altro valore comune per allineare il testo è giustificare . I browser aggiungono spazio al testo giustificato in modo che ogni riga si estenda per riempire lo spazio disponibile:
Quando giustifichi il testo, la riga finale può essere complicata. Dal momento che potrebbe essere molto breve (possibilmente solo una singola parola), la spaziatura su tutta la larghezza può essere brutta. Per impostazione predefinita, anche il testo giustificato allineerà l'ultima riga a sinistra.
la richiesta di amicizia è scomparsa dal registro delle attività
A volte potresti volere un effetto diverso. Le implementazioni del browser stanno raggiungendo le specifiche, ma sono possibili due approcci.
Il giustificare-tutto value dovrebbe significare che i browser trattano la riga finale come tutte le altre e la allungano fino all'intera larghezza. Tuttavia, al momento della scrittura, nessun browser supporta questo valore. Puoi controlla caniuse per vedere se lo fanno quando stai leggendo questo articolo.
Un'altra proprietà CSS, allinea-testo-ultimo , è più flessibile e offre un supporto migliore. Puoi trattarlo più o meno allo stesso modo di allineare il testo , ma si applica solo alla riga finale:
Il supporto del browser per questa proprietà è migliore, ma non perfetto. Ancora, controlla caniuse prima di usarlo . Se un browser non riconosce questa proprietà, la ignorerà.
Allineamento del testo e direzione di lettura
Potresti lavorare con una lingua, come l'arabo o l'ebraico, che si legge da destra a sinistra. CSS utilizza il direzione proprietà per specificarlo, ad esempio:
direction: rtl;Queste lingue di solito allineano il testo a destra per impostazione predefinita.
Invece di dover specificare sinistra / Giusto , il modo preferito per allineare il testo utilizza i valori cominciare e fine . Questo specifica se il testo deve essere allineato all'inizio di ogni riga o alla fine. Nelle lingue da sinistra a destra, cominciare è equivalente a sinistra . In una lingua da destra a sinistra, il testo inizia a destra e finisce a sinistra.
Impossibile trovare l'indirizzo IP del server.
Usando cominciare o fine significa che, indipendentemente dalla direzione del testo, l'allineamento è coerente.
Come gli elementi ereditano la proprietà text-align
Dovresti essere consapevole che allineare il testo eredita la proprietà. Ad esempio, se lo imposti su corpo elemento, si applicherà a ogni elemento della pagina. Puoi, ovviamente, sovrascriverlo su qualsiasi elemento.
Utilizzo della proprietà text-align per controllare il layout
Puoi usare il allineare il testo Proprietà CSS per definire come i browser dispongono il testo in orizzontale. I valori più comuni sono sinistra , Giusto , centro , e giustificare . Questi sono abbastanza semplici, anche se giustificare introduce una certa complessità.
Dovresti usare l'allineamento del testo con parsimonia. Su cartelloni pubblicitari e poster, l'allineamento centrale potrebbe essere appropriato, ma può rendere difficile la lettura di blocchi di testo più lunghi. La giustificazione è solitamente più leggibile quando le righe di testo sono più lunghe. Giustificare brevi colonne di testo può creare spaziatura brutta.
Il allineare il testo proprietà è una delle tante proprietà CSS che forniscono una formattazione utile e un posizionamento di base.
Condividere Condividere Tweet E-mail 10 semplici esempi di codice CSS che puoi imparare in 10 minutiHai bisogno di aiuto con i CSS? Prova questi esempi di codice CSS di base per iniziare, quindi applicali alle tue pagine web.
Leggi Avanti Argomenti correlati- Programmazione
- Sviluppo web
- Web design
- CSS
Bobby è un appassionato di tecnologia che ha lavorato come sviluppatore software per quasi due decenni. È appassionato di giochi, lavora come editor di recensioni presso Switch Player Magazine ed è immerso in tutti gli aspetti dell'editoria online e dello sviluppo web.
Altro da Bobby JackIscriviti alla nostra Newsletter
Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!
Clicca qui per iscriverti