Html.ActionLink 作为带有垂直居中文本的图像按钮？答案

【问题标题】：Html.ActionLink as an image button with vertically-centered text?Html.ActionLink 作为带有垂直居中文本的图像按钮？
【发布时间】：2013-08-14 08:13:22
【问题描述】：

简单地说，问题是 - 有没有办法在操作链接中垂直对齐链接文本？

我需要制作一个看起来像按钮的 Html.ActionLink 控件。 Html.ActionLink as a button or an image, not a link 有一个相当不错的例子

我已经实现了这种方法，但是，我不仅需要一个“图像”按钮，但是一个带有文本的图像按钮，并且该文本取决于视图模型的状态，因此我不能简单地将其放在图像上。

这是我拥有的（剃刀）：

@Html.ActionLink(@commitee.Name, "CommiteePage", "SecureFolder",
new { commiteeName = commitee.Name, page = 1 },
new { @class = "commiteeButton" })

和 CSS：

a.commiteeButton {
background: transparent url("../Images/BlueButton.png") no-repeat top left;
display: block;
width: 304px;
height: 50px;
color: white;
text-decoration: none;
font: normal 14px Arial;
text-align: center;
margin-bottom: 10px;

}

结果还可以，但是：链接的文本位于图像的顶部，而不是在图像的中间（垂直）。我不知道如何将链接文本垂直居中，以便它可以位于图像的中心。

当然，可以有另一种方法（见下文），但也许上面提到的方法仍然可行？

<a class="nonunderlinedlink" href="@Url.Action("CommiteePage", "SecureFolder", new { commiteeName=commitee.Name, page = 1 }, null)">
    <div class="commiteeButton">
        <p class="pstyle">@commitee.Name</p>
    </div>
</a>

【问题讨论】：

试试 display: inline-block;
试着给一些 padding-top
雷克斯，这很有效 - 非常感谢！你能把它作为答案，这样我就可以结束问题了吗？（我的名声还太小，无法回答我自己的问题）

标签： asp.net-mvc razor

【解决方案1】：

在您的 css 中尝试以下更改

a.commiteeButton {
background: transparent url("../Images/BlueButton.png") no-repeat top left;
display: block;
width: 304px;
height: 50px;
color: white;
text-decoration: none;
font: normal 14px Arial;
text-align: center;
margin-bottom: 10px;
display: table-cell;
vertical-align: middle;
}

【讨论】：

【解决方案2】：

Rex（请参阅上面我的问题的 cmets）建议将 padding-top 放在 CSS 中，这已经解决了问题而不会导致附带布局问题。

感谢大家的快速回复！

【讨论】：

【解决方案3】：

我知道有点晚了，但你也可以使用 line-height: 50px;使文本垂直居中

【讨论】：