Problemi di allineamento verticale con HTML

February 25

allineamento verticale non può sempre funzionare come previsto. allineamento verticale può essere gestito in uno dei due modi. elementi di blocco possono utilizzare la proprietà CSS "vertical-align." Il problema con entrambi questi è che non sono progettati per uso generale nel layout - solo con elementi bloccati. Per alcuni elementi HTML, allineamento verticale sono gestiti all'interno del HTML usando il tag "valign".

tabelle

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

L'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 in linea, come ad esempio immagini o elementi div all'interno del flusso del testo, l'allineamento verticale viene modificata basata sulla linea è in - non sulla pagina stessa. Come tale, il problema si è più probabile incontrare con vertical-align è che non fa la stessa cosa all'interno di tutti gli elementi. Se stai usando vertical-align, è possibile impostare l'allineamento preciso dalla percentuale o pixel, così come impostare le opzioni di allineamento generiche di: top, text-alto, al centro, in basso, il testo-bottom, sub, super e della linea di base.

elementi supportati

L'attributo CSS "vertical-align" è solo dovrebbe essere utilizzato su elementi di blocco, non il contenuto di detti elementi. Immagini, strati div, celle di tabella e elementi span sono gli unici pezzi di codice HTML che comportarsi in modo appropriato. testo non strutturato non centrare in una pagina con la sola vertical-align; pagine HTML sono fluidi e tendono solo per essere il più a lungo hanno bisogno di, rendendo l'allineamento verticale per lungo testo non strutturato impraticabile.

Implementazione vertical-align

È possibile aggiungere "vertical-align" per ogni tag in cui si sarebbe usato "valign", e funzionerà. Per gli elementi di blocco, aggiungere "vertical-align" con il valore al vostro CSS per impostare per allineare verticalmente rispetto al testo. Per tag span si dovrà anche aggiungere il CSS "display: block inline;" che tratta tutto nel giro come un blocco. Per la teoria su come implementare allineamento verticale per gli elementi che non sono progettati per utilizzare il css vertical-align, Gavin Kistner offre spiegazione ed esempi tutorial a phrogz.net/css/vertical-align/.