Wyśrodkowywanie w pionie tekstu wewnątrz bloku wiersza

Question

Próbuję utworzyć przyciski dla witryny za pomocą stylowanych hiperłączy. Udało mi się sprawić, by przycisk wyglądał tak, jak chcę, co stanowi jeden drobny problem. Nie mogę uzyskać tekstu ("Link" w kodzie źródłowym poniżej), aby wyśrodkować w pionie.

Niestety nie może być więcej niż jeden wiersz tekstu, jak pokazano z drugiego przycisku, więc nie mogę użyć line-height, aby wyśrodkować go w pionie.

Moim początkowym rozwiązaniem było użycie display: table-cell; zamiast inline-block, a to sortuje problem w Chrome, Firefox i Safari, ale nie w Internet Explorerze, więc myślę, że muszę trzymać się wbudowanego bloku.

jak pójdę o pionowo centrowania tekstu ogniwem w 57px x 100pxinline-block, i to zaspokoić wielu wierszy tekstu? Z góry dziękuję.

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

Zawiń tekst o rozpiętości (wyśrodkowany) i napisać kolejny pusty przedział tuż przed nim (Centerer) tak.

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; 
} 

Spójrz tutaj: http://jsfiddle.net/xVnQ6/

Answer 2

Dziękujemy @avrahamcool, działa jak marzenie!

Mam małe ulepszenie. Można zastąpić redundantny rozpiętość .Centerer z css

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

Zobacz demo tutaj: http://jsfiddle.net/modernweb/bXD2V/

UWAGA: To nie będzie działać z tekstem "content" atrybutu.