如何将 <a> 元素的内部文本垂直设置在中间？答案

【问题标题】：How can I set the inside text of an <a> element vertically in the middle?如何将 <a> 元素的内部文本垂直设置在中间？
【发布时间】：2021-06-06 03:35:22
【问题描述】：

我有一个包含背景图像和文本的<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;
}

我使用了 line-height，但是对于文本稍大的标签，整个文本不会显示。

给定 CSS 和 HTML 内容是什么：

line-height：

【问题讨论】：

能否请您提供 jsFiddle 解决您的问题？
jsfiddle.net/KZL2p 你去吧
仅供参考，您的链接具有 BigBlueButton 类，但您发布的 CSS 用于 BiGreenButton
那么，你能举一个line-height不符合你要求的例子吗？
重复stackoverflow.com/questions/2939914/…

标签： css vertical-alignment

【解决方案1】：

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

jsFiddle

【讨论】：

@LinusCaldwell - 有nearly 95% browser support，如果需要，您可以使用padding 或line-height 为旧IE 添加可接受的后备。
Dispay:Table-cell 炸毁了我所有的页面，我的页面中有 12 张这样的图片，它们应该在一行中
请更具体。 “炸”是什么意思？
@LinusCaldwell 请参阅 Update3！
好的，它应该是什么样子的？有了width 集，我会说它看起来应该如此。

【解决方案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;
}

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案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

【讨论】：