html块中的内容垂直居中,html – 在内嵌块中垂直居中的文本

我正在尝试使用风格的超链接为网站创建一些按钮。我已经设法让按钮看起来像我想要的，禁止一个轻微的问题。我无法将文本(下面的源代码中的“链接”)垂直居中。

不幸的是，第二个按钮可能会显示多行文字，所以我不能使用行高来垂直居中。

我的初始解决方案是使用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：

Link

Link
More Details