css - 如何将元素的内部文本垂直设置在中间？

Answer 1

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

jsFiddle

Answer 2

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

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

Answer 3

在您的情况下，您将不得不使用像<span/>. 看到这个小提琴：

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

演示