Centrare verticalmente il testo all'interno di un blocco in linea

Question

Sto provando a creare alcuni pulsanti per un sito Web utilizzando hyperlinks con stile. Sono riuscito a far apparire il pulsante come voglio, escludere un leggero problema. Non riesco a ottenere il testo ('Link' nel codice sorgente sotto) al centro verticale.

Sfortunatamente potrebbe esserci più di una riga di testo come dimostrato con il secondo pulsante, quindi non è possibile utilizzare line-height per centrarlo verticalmente.

La mia soluzione iniziale era utilizzare display: table-cell; anziché inline-block e questo ordina il problema in Chrome, Firefox e Safari, ma non in Internet Explorer, quindi penso che sia necessario attenermi al blocco inline.

In che modo è possibile centrare verticalmente il testo del collegamento all'interno dello 57px x 100pxinline-block e farlo funzionare su più righe di testo? Grazie in anticipo.

CSS:

.button { 
    background-image:url(/images/categorybutton-off.gif); 
    color:#000; 
    display:inline-block; 
    height:57px; 
    width:100px; 
    font-family:Verdana, Geneva, sans-serif; 
    font-size:10px; 
    font-weight:bold; 
    text-align:center; 
    text-decoration:none; 
    vertical-align:middle; 
} 
.button:hover { 
    background-image:url(/images/categorybutton-on.gif); 
} 
.button:before { 
    content:"Click Here For\A"; 
    font-style:italic; 
    font-weight:normal !important; 
    white-space:pre; 
} 

HTML:

<a href="/" class="button">Link</a> 
<a href="/" class="button">Link<br />More Details</a> 

Answer 1

avvolgere il testo con un arco (Centrato), e scrivere un altro arco vuoto poco prima (CENTRATORE) come questo.

HTML:

<a href="..." class="button"> 
    <span class="Centerer"></span> 
    <span class='Centered'>Link</span> 
</a> 

CSS

.Centered 
{ 
    vertical-align: middle; 
    display: inline-block; 
} 

.Centerer 
{ 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
} 

Date un'occhiata qui: http://jsfiddle.net/xVnQ6/

Answer 2

Molte grazie @avrahamcool, funziona come un fascino!

Ho un piccolo aggiornamento. È possibile sostituire ridondante lasso .Centerer con i CSS

.button:before { 
    content: ''; 
    display: inline-block; 
    vertical-align: middle; 
    height: 100%; 
} 

Vedere demo qui: http://jsfiddle.net/modernweb/bXD2V/

NOTA: Questo non funziona con il testo in attributo "contenuto".