Text vertikal in einem Inline-Block zentrieren

Question

Ich versuche, einige Schaltflächen für eine Website mit formatierten Hyperlinks zu erstellen. Ich habe es geschafft, den Button so aussehen zu lassen, wie ich es will, ein kleines Problem. Ich kann den Text ("Link" im Quellcode unten) nicht vertikal zentrieren.

Leider kann es mehr als eine Textzeile geben, wie mit der zweiten Taste gezeigt, so dass ich line-height nicht verwenden kann, um es vertikal zu zentrieren.

Meine ursprüngliche Lösung war zu verwenden display: table-cell; anstatt inline-block, und das sortiert das Problem in Chrome, Firefox und Safari, aber nicht im Internet Explorer, also denke ich, ich muss inline-Block bleiben.

Wie gehe ich vor, um den Linktext innerhalb der 57px x 100pxinline-block vertikal zu zentrieren, und es auf mehrere Textzeilen ausrichten zu lassen? Danke im Voraus.

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

Wickeln Sie Ihren Text mit einer Spanne (Zentriert), und schreiben Sie eine weitere leere Spanne, kurz bevor es (Zentrierer) wie folgt aus.

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

Werfen Sie einen Blick hier: http://jsfiddle.net/xVnQ6/

Answer 2

Vielen Dank @avrahamcool, wirkt wie ein Zauber!

Ich habe ein kleines Upgrade. Sie können

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

Siehe Demo hier mit CSS redundanter .Centerer Spanne ersetzen: http://jsfiddle.net/modernweb/bXD2V/

Hinweis: Dies wird nicht mit Text in "content" -Attribut arbeiten.