Verticale: allinea un DIV

Questo è il codice per la mia navigazione next / prev trovata su http://ilikeyou.tk/763/ :

 

Vorrei centrare verticalmente i pulsanti. Ho provato ad usare vertical-align:middle; che non ha funzionato. Ho anche provato in top:50%; ma non ha funzionato.

Ecco il mio css:

 .navigation { position: relative; float: left; vertical-align : middle; height: auto; padding: 0; margin: 0 -20px 0 -22px; width: 636px; z-index:1; } .navigation a.prev{ background: url('images/nav_left.png'); float: left; width: 50px; height: 50px; margin-left:10px; } .navigation a.next { background: url('images/nav_right.png'); float: right; width: 50px; height: 50px; margin-right:10px; } 

Grazie!

Quindi, immagino che l’altezza dell’area del contenuto non sia molto statica.

http://jsfiddle.net/aBzhu/

Trucco significa avere l’elemento esterno impostato in position: relative; float: left; position: relative; float: left; e poi l’elemento che vuoi centrare come position: absolute; top: 50%; margin-top: -Half_the_height_of_this_element; position: absolute; top: 50%; margin-top: -Half_the_height_of_this_element;

Si noti che questo funziona solo quando l’elemento che si desidera centrare verticalmente è altezza statica. Dovrei adattarmi al tuo utilizzo, penso.

Edit: Oh .. e non penso che funzioni necessariamente in ie6. Ma funziona ie7 +

Edit2: anche se non sei interessato a metodi così gracili dovresti verificarlo usando jQuery per centrare un DIV sullo schermo

vertical-align è inteso per il rendering di celle di tabella, e anche questo è abbastanza problematico. Perché non aggiungere solo alcuni pixel del padding superiore alla tua navigazione ul ? Non è un vero centraggio, ma ovviamente non sei preoccupato del ridimensionamento dinamico quando stai usando una grafica ad altezza fissa per lo sfondo di navigazione.

Questa soluzione mi ha abbinato perfettamente a testi piccoli. Anche se si tratta di un collegamento o di un testo all’interno del div, questa class CSS potrebbe allineare verticalmente il contenuto all’interno del DIV. Funziona anche per IE ..

  .verticalCenterDivText{ height: 29px; line-height: 29px; } 

Spero che questo ti aiuti….

Cordiali saluti, ADynaMic