我正在尝试使用风格的超链接为网站创建一些按钮。我已经设法让按钮看起来像我想要的，禁止一个轻微的问题。我无法将文本(下面的源代码中的“链接”)垂直居中。
不幸的是，第二个按钮可能会显示多行文字，所以我不能使用行高来垂直居中。
我的初始解决方案是使用display：table-cell;而不是内联阻止，并且在Chrome，Firefox和Safari中排除问题，但不是在Internet Explorer中，所以我想我需要坚持内联阻止。
我将如何在57px x 100px的内嵌块中垂直居中链接文本，并适应多行文字？提前致谢。
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>
解决方法
用一个跨度(居中)包装文本，并在此之前写入另一个空的范围(Centerer)。
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;
}
