Bir satır içi bloğu içinde metni dikey olarak ortalayın

Question

Bir web sitesi için stilli köprüler kullanarak bazı düğmeler oluşturmaya çalışıyorum. Düğmeyi nasıl istediğimi görmeyi başarabildim, ufak bir sorunla karşılaştım. Dikey olarak ortalamak için metni (aşağıdaki kaynak kodunda 'Link') alamıyorum.

Maalesef, ikinci düğme ile gösterildiği gibi birden fazla metin satırı olabilir, bu yüzden dikey olarak ortalamak için line-height kullanamıyorum.

İlk çözümüm, inline-block yerine display: table-cell; kullanmaktı ve bu sorunu Chrome, Firefox ve Safari'de değil Internet Explorer'da değil, satır içi bloğa bağlı kalmam gerektiğini düşünüyorum.

Bağlantı metnini 57px x 100pxinline-block içinde dikey olarak ortalamak ve birden çok metin satırına sahip olmasını nasıl sağlayabilirim? Şimdiden teşekkürler.

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

böyle bir yayılma (Merkezli) ile metin sarma ve sadece (Centerer) önce başka boş yayılma yazın.

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

burada bir göz atın: http://jsfiddle.net/xVnQ6/

Answer 2

Çok teşekkürler @avrahamcool, bir cazibe gibi çalışır!

Biraz yükseltmem var. http://jsfiddle.net/modernweb/bXD2V/

NOT: Bu "içerik" özelliğinde metinle çalışmaz Sen css

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

demo buraya bakınız ile gereksiz .Centerer yayılma yerini alabilir.