Conoscere come allineare il testo all'interno delle pagine web ti permette di adattare le scritte alle varie situazioni. Ad esempio, per una pagina più professionale, potrebbe essere adeguato utilizzare il giustificato. Per alcuni titoli, si potrebbe utilizzare il testo centrato.
In questa lezione, vediamo come allineare il testo in CSS. Per farlo, ecco le proprietà che vedremo:
| Proprietà | Descrizione |
text-align | Imposta l'allineamento orizzontale del testo. |
text-align-last | Imposta l'allineamento orizzontale dell'ultima riga del testo. |
direction | Imposta la direzione di scrittura del testo. |
vertical-align | Imposta l'allineamento verticale del testo. |
Vediamo le proprietà in dettaglio.
La proprietà text-align è probabilmente la più utilizzata. Permette di impostare l'allineamento orizzontale del testo. Ecco i valori che possiamo utilizzare:
left è il valore predefinito. Allinea il testo a sinistra.right allinea il testo a destra.center allinea il testo al centro.justify permette di impostare il giustificato. In questo caso, tutte le righe del testo saranno allineate e tra le parole sarà impostato uno spazio variabile.Vediamo alcuni esempi. Ecco come impostare il testo allineato a sinistra:
p {
text-align: left;
}Ecco, invece, come impostare l'allineamento a destra:
p {
text-align: right;
}In questo modo allineiamo al centro il testo:
p {
text-align: center;
}Infine, per impostare il giustificato, usiamo justify:
p {
text-align: justify;
}Questo metodo vale per i testi, ma si può utilizzare anche per tutti quegli elementi inline (ti ricordi la differenza tra inline e block di HTML?), come ad esempio le immagini. Possiamo allineare un'immagine attraverso text-align:
<div><img src="https://biadets.com/language/css/img/parrot.jpg"></div>
<style>
div {
width: 100vw;
text-align: center;
}
</style>La proprietà CSS text-align-last permette di allineare l'ultima riga del testo. Accetta gli stessi valori di text-align: left, right, center e justify.
<p>Il termine SEO sta per "Ottimizzazione per i Motori di Ricerca". In poche parole,
scrivere in ottica SEO significa utilizzare una serie di strategie per migliorare
la visibilità dei tuoi contenuti online - Da Biadets Blog</p>
<style>
p {
text-align-last: right;
}
</style>La proprietà CSS direction permette di modificare la direzione di scrittura del testo. Normalmente, noi siamo abituati a leggere i testi da sinistra verso destra. Con questa proprietà, possiamo impostare il testo da destra verso sinistra.
direction:ltr (left-to-right) è il valore predefinito e imposta il testo da sinistra verso destra.direction:rtl (right-to-left) imposta il testo da destra verso sinistra.<p>Il termine SEO sta per "Ottimizzazione per i Motori di Ricerca". In poche parole,
scrivere in ottica SEO significa utilizzare una serie di strategie per migliorare
la visibilità dei tuoi contenuti online - Da Biadets Blog</p>
<style>
p {
direction: rtl;
}
</style>La proprietà CSS vertical-align permette di specificare l'allineamento verticale del testo. Questa proprietà può essere utilizzata per scritture in apice o pedice, ad esempio.
Ecco i valori possibili:
baseline allinea la linea di base dell'elemento con la linea di base del genitore. Questo è il valore predefinito.sub allinea l'elemento come un apice, sollevandolo leggermente rispetto alla linea di base.super allinea l'elemento come un pedice, abbassandolo leggermente rispetto alla linea di base.text-top allinea la parte superiore dell'elemento con la parte superiore del contenitore dell'elemento stesso.text-bottom allinea la parte inferiore dell'elemento con la parte inferiore del contenitore dell'elemento stesso.middle allinea il centro dell'elemento con il centro dell'elemento genitore.top allinea la parte superiore dell'elemento con la parte superiore della linea predefinita.bottom allinea la parte inferiore dell'elemento con la parte inferiore della linea predefinita.Vediamo un esempio che racchiude tutte le varie possibilità:
<span class="baseline">Questo</span> <span class="sub">testo</span> <span class="super">ha</span>
<span class="text-top">posizioni</span> <span class="text-bottom">verticali</span>
<span class="middle">molto</span> <span class="top">diverse</span> <span class="bottom">tra</span>
<span class="numero">loro</span>
<style>
span.baseline { vertical-align: baseline; }
span.sub { vertical-align: sub; }
span.super { vertical-align: super; }
span.text-top { vertical-align: text-top; }
span.text-bottom { vertical-align: text-bottom; }
span.middle { vertical-align: middle; }
span.top { vertical-align: top; }
span.bottom { vertical-align: bottom; }
span.numero { vertical-align: 10px; }
</style>