Come allineare il testo con i css.

L'allineamento del testo è una parte importante della progettazione grafica. Avere dei testi allineati correttamente è di aiuto anche per una buona comprensione e leggibilità dei contenuti.

- Allineamenti orizzontali del testo

Gli allineamenti posizionano il testo orizzontalmente rispetto alla finestra del browser oppure rispetto ad un elemento contenitore.

Allineamento a sinistra:

Il testo viene allineato a sinistra rispetto alla finestra del browser o all'elemento contenitore.
Codice:

.allleft {
        font-family:"Times New Roman", Times, serif;
        font-size:14px;
        color:#000000;
        text-align:left;
} 
<p  class="allleft">Questo testo è allineato a sinistra</p>

Risultato:
“Questo testo è allineato a sinistra”

Allineamento a destra:

Il testo viene allineato a destra rispetto alla finestra del browser o all'elemento contenitore.
Codice:

.allright {
        font-family:"Times New Roman", Times, serif;
        font-size:14px;
        color:#000000;
        text-align:right;
}
<p  class="allright">Questo testo è allineato a destra</p>

Risultato:

“Questo testo è allineato a destra”

Allineamento al centro:

Il testo viene allineato al centro rispetto alla finestra del browser o all'elemento contenitore.
Codice:

.allcenter {
        font-family:"Times New Roman", Times, serif;
        font-size:14px;
        color:#000000;
        text-align:center;
}
<p  class="allcenter">Questo testo è allineato al centro</p>

Risultato:

“Questo testo è allineato al centro”

Allineamento giustificato:

Il testo viene giustificato, cioè allineato sia a sinistra che e a destra rispetto alla finestra del browser o all'elemento contenitore.
Codice:

.alljustify {
        font-family:"Times New Roman", Times, serif;
        font-size:14px;
        color:#000000;
        text-align:justify;
        width:500px;
}
<p  class="allcenter">Quae, vulpem cum revocasset, intrito cibo plenam lagonam posuit; huic rostrum inserens satiatur ipsa et torquet convivam fame. Nulli nocendum, si quis vero laeserit, multandum simili iure fabella admonet. Consilia qui dant prava cautis hominibus et perdunt operam et deridentur turpiter. Quae cum lagonae collum frustra lamberet, peregrinam sic locutam volucrem accepimus: 'Sua quisque exempla debet aequo animo pati'. Canes currentes bibere in Nilo flumine, a corcodillis ne rapiantur, traditum est.</p>

Risultato:

“Quae, vulpem cum revocasset, intrito cibo plenam lagonam posuit; huic rostrum inserens satiatur ipsa et torquet convivam fame. Nulli nocendum, si quis vero laeserit, multandum simili iure fabella admonet. Consilia qui dant prava cautis hominibus et perdunt operam et deridentur turpiter. Quae cum lagonae collum frustra lamberet, peregrinam sic locutam volucrem accepimus: 'Sua quisque exempla debet aequo animo pati'. Canes currentes bibere in Nilo flumine, a corcodillis ne rapiantur, traditum est.”

- Allineamenti verticali del testo

Gli allineamenti verticali posizionano il testo rispetto ad un contenuto (in questo caso una fotografia), presente sulla stessa linea.

Allineamento in alto:

Il testo viene allineato in alto rispetto alla fotografia.
Codice:

.alltop {
        font-family:"Times New Roman", Times, serif;
        font-size:14px;
        color:#000000;
        vertical-align:top;
}
<p>Lorem ipsum dolor sit amet, <img src="f1.jpg width="80" height="80" class="alltop"/> consectetuer adipiscing elit.</p>

Risultato:

immagine allineamento del testo in alto

Allineamento nel mezzo:

Il testo viene allineato nel mezzo rispetto alla fotografia.
Codice:

.allmiddle {
        font-family:"Times New Roman", Times, serif;
        font-size:14px;
        color:#000000;
        vertical-align:middle;
}
<p>Lorem ipsum dolor sit amet, <img src="f1.jpg width="80" height="80" class="allmiddle"/> consectetuer adipiscing elit.</p>

Risultato:

immagine allineamento del testo nel mezzo

Allineamento in basso:

Il testo viene allineato in basso rispetto alla fotografia.
Codice:

.allbottom {
        font-family:"Times New Roman", Times, serif;
        font-size:14px;
        color:#000000;
        vertical-align:top;
}
<p>Lorem ipsum dolor sit amet, <img src="f1.jpg width="80" height="80" class="allbottom"/> consectetuer adipiscing elit.</p>

Risultato:
immagine allineamento del testo in basso

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *