Valori
Per ciascuno dei seguenti valori, lo applicheremo a un’immagine in linea all’interno di una casella di riga di un elemento di elenco. La casella di riga in ciascuna delle immagini ha un bordo grigio tratteggiato. La linea che viene utilizzata per allineare le immagini per ogni valore è rossa.
baseline Questo è il valore predefinito. Allinea la linea di base dell’elemento con la linea di base del riquadro di riga. Se l’elemento non ha una linea di base, allinea il bordo del margine inferiore alla linea di base della linea.
middle Allinea il punto medio verticale dell’elemento con la linea di base della linea più metà dell’altezza x della linea (determinata dal font).
Questo è uno dei valori più comunemente utilizzati per vertical-align proprietà e viene solitamente utilizzato per allineare le icone e gli indicatori di elenco con il testo in linea.
sub Abbassa la linea di base dell’elemento nella posizione corretta per i pedici sulla riga. (Questo valore non ha effetto sulla dimensione del carattere del testo dell’elemento.)
super Alza la linea di base dell’elemento nella posizione corretta per gli apici sulla riga. (Questo valore non ha effetto sulla dimensione del carattere del testo dell’elemento.)
text-top Allinea la parte superiore dell’elemento con la parte superiore dell’area del contenuto della riga. L’altezza dell’area del contenuto è appena sufficiente per il numero massimo di ascendenti e discendenti di tutti i caratteri nella riga e la linea di allineamento è la parte superiore di tale altezza. Tieni presente che l’altezza potrebbe essere maggiore di qualsiasi dimensione dei caratteri coinvolti, a seconda dell’allineamento di base dei caratteri.
text-bottom Allinea la parte inferiore dell’elemento con la parte inferiore dell’area del contenuto della linea. L’altezza dell’area del contenuto è appena sufficiente per il numero massimo di discendenti e ascendenti di tutti i caratteri nella riga e la linea di allineamento è la parte inferiore di tale altezza. Tieni presente che l’altezza potrebbe essere maggiore di qualsiasi dimensione del carattere coinvolta, a seconda dell’allineamento della linea di base dei caratteri.
top Allinea la parte superiore dell’elemento con la parte superiore del intera linea. Ciò significa che se ci sono altri elementi sulla riga ciascuno con altezze diverse, come ad esempio più immagini, la parte superiore della riga sarà all’altezza della più alta delle due immagini.
Se la riga ha un line-height che è superiore al contenuto più alto sulla riga, la parte superiore del riquadro di riga sarà quindi determinata da tale altezza.
bottom
line-height, la parte inferiore del riquadrato di riga è determinata dai discendenti più bassi del carattere in questo esempio, quindi il risultato è simile a quello ottenuto utilizzando text-bottom. Allinea l’elemento alla fine dell’intera riga.
Se la riga ha un line-height inferiore al contenuto più basso della riga, la parte inferiore della casella di riga sarà quindi determinata da tale altezza.
line-height specificato che estende la parte inferiore della riga verso il basso e l’immagine è allineata con quella parte inferiore.
< percentuale > Alza l’elemento sopra la linea di base (se il valore percentuale è positivo) o abbassa l’elemento sotto la linea di base (se il valore percentuale è negativo) per l’importo specificato. L’importo specificato è una percentuale del valoreline-height. Il valore0%ha lo stesso significato dibaseline.
line-height specificato è 100 px, quindi l’immagine viene innalzata di 50 px sopra la linea di base. < length > Alza l’elemento sopra la linea di base (se il valore della lunghezza è positivo) o abbassa l’elemento sotto la linea di base (se il valore di lunghezza è negativo) dell’importo specificato. Un valore “0” ha lo stesso significato dibaseline.
Note
I valori top, bottom e middle si comportano come previsto quando vengono applicati agli elementi della cella di tabella. Tuttavia, altri valori potrebbero avere un comportamento imprevisto in alcuni browser. Chris Coyier lo dice meglio:
Quando si utilizza l’allineamento verticale sulle celle di una tabella, la scelta migliore è restare in alto, in basso e al centro. Nessuno degli altri valori ha comunque molto senso e ha risultati imprevedibili per browser incrociati. Ad esempio, l’impostazione di una cella su testo in basso allinea il testo in basso in IE 6 e in alto in Safari 4. L’impostazione su sub causa l’allineamento centrale in IE 6 e in alto in Safari 4.
L’allineamento verticale predefinito per le celle della tabella (<td>) è middle. Tuttavia, l’allineamento verticale predefinito per un elemento a livello di blocco che ha display: table-cell è ancora top, che è l’allineamento predefinito per il livello di blocco contenitori in genere. Vedere la sezione demo di seguito per un esempio dal vivo.
