Вертикально центрирующий текст внутри встроенного блока

Question

Я пытаюсь создать несколько кнопок для веб-сайта, используя стилизованные гиперссылки. Мне удалось получить кнопку, выглядящую так, как я хочу, запустив одну небольшую проблему. Я не могу получить текст («Ссылка» в исходном коде ниже) для вертикального центра.

К сожалению, может быть более одной строки текста, как показано на второй кнопке, поэтому я не могу использовать line-height для вертикального центрирования.

Моим первоначальным решением было использовать display: table-cell;, а не inline-block, и это сортирует проблему в Chrome, Firefox и Safari, но не в Internet Explorer, поэтому я думаю, что мне нужно придерживаться встроенного блока.

Как бы я поместил вертикальное центрирование текста ссылки в пределах 57px x 100pxinline-block, и у вас есть множество строк текста? Заранее спасибо.

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

Оберните текст с пролетом (по центру), и написать еще один пустой пролет только перед ним (центратор), как это.

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

Посмотрите здесь: http://jsfiddle.net/xVnQ6/

Answer 2

Большое спасибо @avrahamcool, работает как шарм!

У меня есть небольшое обновление. Вы можете заменить избыточную продолжительность .Centerer с помощью CSS

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

Смотрите демо здесь: http://jsfiddle.net/modernweb/bXD2V/

Примечание: Это не будет работать с текстом в «содержание» атрибута.