CSS vertical-align
La proprietà CSS vertical-align (CSS) controlla l'allineamento verticale degli elementi inline
La proprietà vertical-align definisce come un elemento inline o una cella di tabella viene allineato verticalmente rispetto alla linea di base della linea di testo o rispetto ad altri elementi inline adiacenti. È particolarmente utile per allineare apici, pedici o immagini rispetto al testo circostante.
Sintassi
Significato dei valori principali:
baseline: Allinea la linea di base dell'elemento con la linea di base del suo contenuto genitore. Valore predefinito.
sub: Posiziona l'elemento come pedice rispetto alla linea di base.
super: Posiziona l'elemento come apice rispetto alla linea di base.
top: Allinea la parte superiore dell'elemento con la parte superiore della linea di contenuto.
text-top: Allinea la parte superiore dell'elemento con la parte superiore del testo della linea di contenuto.
middle: Allinea il centro verticale dell'elemento con il centro della linea di testo contenitore.
bottom: Allinea la parte inferiore dell'elemento con la parte inferiore della linea di contenuto.
text-bottom: Allinea la parte inferiore dell'elemento con la parte inferiore del testo della linea di contenuto.
lengthopercentage: Sposta l'elemento verticalmente rispetto alla linea di base, con un valore assoluto (px, em, etc.) o relativo (%).
Esempio proprietà: vertical-align
Codice Esempio: vertical-align
.vertical-align-example {
font-size: 24px;
border: 1px solid #50a14f;
padding: 20px;
width: 500px;
background-color: #f0f9f4;
}.va-baseline {
vertical-align: baseline;
background-color: #d1e7dd;
padding: 2px 6px;
margin-right: 10px;
}.va-sub {
vertical-align: sub;
background-color: #f8d7da;
padding: 2px 6px;
margin-right: 10px;
}.va-super {
vertical-align: super;
background-color: #cfe2ff;
padding: 2px 6px;
margin-right: 10px;
}.va-middle {
vertical-align: middle;
background-color: #fff3cd;
padding: 2px 6px;
margin-right: 10px;
}.va-top {
vertical-align: top;
background-color: #d1d1d1;
padding: 2px 6px;
margin-right: 10px;
}.va-bottom {
vertical-align: bottom;
background-color: #e2d1f9;
padding: 2px 6px;
}
Contenuto Esempio: vertical-align
Esempio di utilizzo di vertical-align
In questo esempio, diversi elementi inline sono allineati verticalmente in modi differenti usando vertical-align:
CSS e HTML per l'esempio di vertical-align:
<style>
.vertical-align-example {
font-size: 24px;
border: 1px solid #50a14f;
padding: 20px;
width: 500px;
background-color: #f0f9f4;
}
.va-baseline {
vertical-align: baseline;
background-color: #d1e7dd;
padding: 2px 6px;
margin-right: 10px;
}
.va-sub {
vertical-align: sub;
background-color: #f8d7da;
padding: 2px 6px;
margin-right: 10px;
}
.va-super {
vertical-align: super;
background-color: #cfe2ff;
padding: 2px 6px;
margin-right: 10px;
}
.va-middle {
vertical-align: middle;
background-color: #fff3cd;
padding: 2px 6px;
margin-right: 10px;
}
.va-top {
vertical-align: top;
background-color: #d1d1d1;
padding: 2px 6px;
margin-right: 10px;
}
.va-bottom {
vertical-align: bottom;
background-color: #e2d1f9;
padding: 2px 6px;
}
</style>
<div class="vertical-align-example">
<span class="va-baseline">Baseline</span>
<span class="va-sub">Sub</span>
<span class="va-super">Super</span>
<span class="va-middle">Middle</span>
<span class="va-top">Top</span>
<span class="va-bottom">Bottom</span>
</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
