Centro di allineamento verticale su un tag di ancoraggio del blocco in linea

Question

Ho bisogno che i miei collegamenti e pulsanti abbiano lo stesso aspetto, ma non sono stato in grado di allineare verticalmente il testo all'interno di un tag "a" nello stesso modo del tag "button". È importante notare che i tag devono essere in grado di gestire più righe di testo (quindi l'altezza della linea non funzionerà).

a,button { 
    display: inline-block; 
    -moz-box-sizing: border-box; 
    width: 150px; 
    height: 150px; 
    vertical-align: middle; 
    border: 1px solid #000; 
    text-align: center; 
} 

Vedere la jsfiddle di seguito:

http://jsfiddle.net/bZsaw/3/

Come si può vedere, posso farlo funzionare con una combinazione di un tag span all'interno e l'impostazione "display: table" al "a" e impostazione "display: table-cell" e "vertical-align: middle" allo span, ma ciò non funziona in IE7.

a,button { 
    width: 150px; 
    height: 150px; 
    border: 1px solid #000; 
    text-align: center; 
} 

a { 
    display: table; 
    -moz-box-sizing: border-box; 
} 

a span, button span { 
    vertical-align: middle; 
    text-align: center; 
} 

a span { 
    display: table-cell; 
} 

Alla ricerca di una semplice soluzione CSS.

Answer 1

L'unico modo affidabile per ho trovato il testo align verticale e permetto avvolgimento del testo se diventa troppo lungo è con un approccio 2 container.

Il contenitore esterno deve avere un'altezza di riga di almeno il doppio specificato per il contenitore interno. Nel tuo caso, ciò significa quanto segue:

a { 
    width: 150px; 
    height: 150px; 
    border: 1px solid #000; 
    text-align: center; 
    line-height: 150px; 
    display: block; 
} 

a span { 
    display:inline; 
    display:inline-table; 
    display:inline-block; 
    vertical-align:middle; 
    line-height: 20px; 
    *margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight)/2) + "px" : "0"); 
} 

Aggiungi float a sinistra sull'etichetta se desideri tutto in linea. Ecco l'esempio aggiornato con testo lungo in una variabile troppo .. http://jsfiddle.net/bZsaw/13/

È possibile impostare l'altezza della linea sul arco a tutto ciò che vi piace e se è inferiore alla metà dell'altezza della riga del genitore, lo farà center E consente il ritorno a capo del testo se il testo supera la larghezza del contenitore genitore. Funziona su tutti i browser moderni per quanto ne so.

Answer 2

Se il testo non supera la larghezza della casella, è possibile impostare l'altezza della riga uguale all'altezza della casella.

line-height:150px;

Answer 3

Usaline-height:150px; e display-inline:block;