如何设置<a> element vertically in the middle?</a>的内部文本

Question

我有一个包含背景图片和文字的<a>标签。问题是文本贴在图像的顶部。

<a class="BigBlueButton" href="/where-is-my-order.aspx">
      Where Is My Order?
</a> 

我的css如下：

.BigBlueButton
{
    width:233px;
    vertical-align:middle;
    text-align:center;
    height:122px;
    background: url(../img/GreenBotton.png) no-repeat ;
    background-repeat:no-repeat;
    margin-bottom:10px;
    margin-top: 10px;
    margin-left:1%;
    display:inline-block;
    color:White;
    font-size:large;
    font-weight:bold;
    text-decoration:none;
    vertical-align:middle;

}

我使用了行高，但对于文本稍微大一点的标签，整个文本都不显示。

给定的css和Html有什么用：

我用line-height得到了什么：

Answer 1

只需将display: inline-block;更改为display: table-cell;

即可

jsFiddle

Answer 2

在您的情况下，您必须使用像<span/>这样的包装器。见Fiddle：

<a href="#"><span>Text</span></a>

用这个css：

a
{
    display:inline-block;
    float: left;
}

span
{
    width:233px;
    height:122px;
    display: table-cell;
    vertical-align:middle;
    text-align:center;
}

Answer 3

我会使用带填充的div。 我不知道它是否是最好的做法。 显然，将背景放在正确大小的div中并使用正确的填充。

<a href="test.php">
<div style="padding:10px;width:150px;border:1px #000 solid;text-align:center;">
    Hello!
</div>
</a>

Answer 4

为了解决这个问题，我终于找到了以下解决方法：

 <a href="www.mydoamin.com" class="div_a">
    <span class="wrapper">
      <span class="div_txt">Contentdas asd ad adasd asd asdad </span>
    </span>
</a>
<a href="www.mydoamin.com" class="div_a">
    <span class="wrapper">
      <span class="div_txt">Content</span>
    </span>
</a>

并关注CSS

   a.div_a {
      display:inline-table;
      width:200px;
      height:100px;
      background-color:#CCC;
      background-image:url( http://jsfiddle.net/img/logo.png);
    text-align:center;
    }

.wrapper {
    display: table-cell;
    vertical-align: middle;

}

DEMO