6.1 Proprietà text-align
Allineamento del testo — è praticamente l'aspetto più importante della stilizzazione delle pagine web, che permette di controllare come il testo è posizionato nei contenitori. CSS offre due proprietà principali per allineare il testo: text-align e vertical-align. Queste proprietà permettono di gestire l'allineamento orizzontale e verticale del testo rispettivamente.
La proprietà text-align gestisce l'allineamento orizzontale del testo all'interno di un elemento di blocco. Determina come il testo è allineato rispetto ai bordi dell'elemento.
Valori
left: allinea il testo a sinistra (predefinito per il testo da sinistra a destra)right: allinea il testo a destra (predefinito per il testo da destra a sinistra)center: centra il testojustify: allinea il testo ai margini sinistro e destro, aggiungendo spazi tra le parole per distribuire uniformemente il testo su tutta la larghezza del contenitorestart: allinea il testo all'inizio (sinistra o destra a seconda della direzione del testo)end: allinea il testo alla fine (destra o sinistra a seconda della direzione del testo)
Esempio di utilizzo:
.left {
text-align: left;
}
.right {
text-align: right;
}
.center {
text-align: center;
}
.justify {
text-align: justify;
}
<body>
<p class="left">Questo testo è allineato a sinistra.</p>
<p class="right">Questo testo è allineato a destra.</p>
<p class="center">Questo testo è centrato.</p>
<p class="justify">Questo testo è giustificato. Sarà allungato in modo che il testo occupi tutta la larghezza del contenitore.</p>
</body>
6.2 Proprietà vertical-align
La proprietà vertical-align gestisce l'allineamento verticale di un elemento rispetto alla linea di base del suo genitore. È più comunemente usata per allineare elementi inline, come immagini, righe di testo o tabelle, verticalmente in una riga di testo o in un altro contenitore.
Valori:
baseline: allinea alla linea di base del genitore (valore predefinito)sub: allinea come indice inferioresuper: allinea come indice superioretext-top: allinea alla parte superiore del font del genitoretext-bottom: allinea alla parte inferiore del font del genitoremiddle: allinea al centro del genitoretop: allinea alla parte superiore del contenitorebottom: allinea alla parte inferiore del contenitore- Valore percentuale: sposta l'elemento della percentuale indicata rispetto all'altezza della riga
Esempio di utilizzo:
.container {
height: 100px;
border: 1px solid #000;
}
.baseline {
vertical-align: baseline;
}
.sub {
vertical-align: sub;
}
.super {
vertical-align: super;
}
.text-top {
vertical-align: text-top;
}
.text-bottom {
vertical-align: text-bottom;
}
.middle {
vertical-align: middle;
}
.top {
vertical-align: top;
}
.bottom {
vertical-align: bottom;
}
.percent-50 {
vertical-align: 50%;
}
<body>
<div class="container">
<span class="baseline">baseline</span>
<span class="sub">sub</span>
<span class="super">super</span>
<span class="text-top">text-top</span>
<span class="text-bottom">text-bottom</span>
<span class="middle">middle</span>
<span class="top">top</span>
<span class="bottom">bottom</span>
<span class="percent-50">50%</span>
</div>
</body>
GO TO FULL VERSION