html - Vertically centering text within an inline-block -

i'm trying create buttons website using styled hyperlinks. have managed button looking how want, bar 1 slight issue. can't text ('link' in source code below) vertically center.

unfortunately there may more 1 line of text demonstrated second button can't use line-height vertically center it.

my initial solution use display: table-cell; rather inline-block, , sorts issue in chrome, firefox , safari not in internet explorer i'm thinking need stick inline-block.

how go vertically centering link text within 57px x 100px inline-block, , have cater multiple lines of text? in advance.

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> 

wrap text span (centered), , write empty span before it(centerer) this.

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

take here: http://jsfiddle.net/xvnq6/