CSS text-align
La proprietà CSS3 text-align controlla l'allineamento orizzontale del contenuto testuale
La proprietà text-align in CSS3 viene utilizzata per definire come il testo e gli altri contenuti in linea vengono allineati orizzontalmente all'interno di un contenitore a blocco. È particolarmente utile per creare layout leggibili e ben strutturati.
Sintassi
Significato dei valori principali:
left: Allinea il testo a sinistra (valore predefinito nei documenti LTR).
right: Allinea il testo a destra (valore predefinito nei documenti RTL).
center: Centra orizzontalmente il contenuto.
justify: Allinea il testo su entrambi i margini, creando spaziature tra le parole.
start: Allinea il contenuto all’inizio della direzione di scrittura (es. sinistra per ltr, destra per rtl).
end: Allinea il contenuto alla fine della direzione di scrittura (es. destra per ltr, sinistra per rtl).
Esempio proprietà: text-align
Codice Esempio: text-align
.align-left {
text-align: left;
background-color: #f6f8fa;
padding: 10px;
border-left: 5px solid #e06c75;
margin-bottom: 10px;
}.align-center {
text-align: center;
background-color: #f6f8fa;
padding: 10px;
border-left: 5px solid #98c379;
margin-bottom: 10px;
}.align-right {
text-align: right;
background-color: #f6f8fa;
padding: 10px;
border-left: 5px solid #61afef;
margin-bottom: 10px;
}.align-justify {
text-align: justify;
background-color: #f6f8fa;
padding: 10px;
border-left: 5px solid #c678dd;
margin-bottom: 10px;
}
Contenuto Esempio: text-align
Esempio di utilizzo della proprietà text-align
Nel seguente esempio sono mostrati diversi paragrafi con differenti valori della proprietà text-align:
HTML e CSS completo per l'esempio:
<style>
.align-left {
text-align: left;
background-color: #f6f8fa;
padding: 10px;
border-left: 5px solid #e06c75;
margin-bottom: 10px;
}
.align-center {
text-align: center;
background-color: #f6f8fa;
padding: 10px;
border-left: 5px solid #98c379;
margin-bottom: 10px;
}
.align-right {
text-align: right;
background-color: #f6f8fa;
padding: 10px;
border-left: 5px solid #61afef;
margin-bottom: 10px;
}
.align-justify {
text-align: justify;
background-color: #f6f8fa;
padding: 10px;
border-left: 5px solid #c678dd;
margin-bottom: 10px;
}
</style>
<div class="align-left">
Questo testo è allineato a sinistra.
</div>
<div class="align-center">
Questo testo è centrato orizzontalmente.
</div>
<div class="align-right">
Questo testo è allineato a destra.
</div>
<div class="align-justify">
Questo è un paragrafo giustificato. Il testo si estende da un margine all'altro della riga, distribuendo uniformemente gli spazi tra le parole.
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.118
