Allineamento verticale non sempre funzionino come previsto. Allineamento verticale può essere gestito in due modi. Elementi di blocco possono usare la proprietà CSS "vertical-align." Il problema con entrambi questi è che non sono progettati per uso generale nel vostro layout..--solo con elementi bloccati. Per alcuni elementi HTML, allineamento verticale vengono gestiti nel codice HTML utilizzando il tag "valign".

Tabelle

Se stai creando un layout di pagina che utilizza le tabelle, le probabilità sono che una cella sta per avere più contenuti rispetto agli altri. Quando una cellula ha più spazio verticale rispetto ai contenuti, tutto allinea verso il centro..--non esattamente esteticamente piacevole Web design. In precedenza, questo è stato facilmente risolto aggiungendo l'attributo di "valign" al tag cella (< td >). Valign valori sono alto, medio, basso e linea di base, ad esempio < td valign = "top" align = "center" >. Tuttavia, valign è obsoleto; mentre si lavora, è fuori-datato. Si dovrebbe invece CSS per allineare gli elementi di cella.

Allineamento verticale in CSS

L'equivalente CSS del tag "valign" è "vertical-align." Può essere utilizzato nello stesso modo con maggiore precisione. Vertical-align opere all'interno delle cellule al posto di "valign." Con elementi inline, ad esempio immagini o elementi div all'interno del flusso del testo, l'allineamento verticale viene modificato in base sulla linea che non è in..--pagina. Come tale, il problema che è più probabile incontrare con vertical-align è che non fa la stessa cosa all'interno di tutti gli elementi. Se stai usando allineamento verticale, è possibile impostare l'allineamento proprio da pixel o percentuale, nonché impostare le opzioni di allineamento generico di: cima, testo-alto, medio, basso, testo-fondo, sub, super e linea di base.

Elementi supportati

L'attributo CSS "vertical-align" solo dovrebbe essere utilizzato su elementi di blocco, non il contenuto dei predetti elementi. Immagini, strati di div, celle di tabella ed elementi span sono gli unici bit di codice HTML che si comporterà in modo appropriato. Testo non strutturato non avrà al centro su una pagina con vertical-align da solo; Pagine HTML sono fluide e tendono solo ad essere fintanto che hanno bisogno di, rendendo impraticabile allineamento verticale del testo lungo non strutturati.

Implementazione di Vertical-Align

È possibile aggiungere "vertical-align" a qualsiasi tag dove avreste usato "valign", e funzionerà. Per elementi di blocco, aggiungere "vertical-align" con il valore per il tuo CSS per impostarlo per allineare verticalmente rispetto al testo. Per tag span è anche necessario aggiungere il codice CSS "visualizzare: blocco inline;" che considera tutto all'interno della portata come un blocco. Per la teoria su come implementare l'allineamento verticale per elementi che non sono progettati per utilizzare l'allineamento verticale in css, Gavin Kistner offerte spiegazione ed esempi esercitazioni presso phrogz.net/css/vertical-align/.