Question

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

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

有一个相当不错的例子

我已经实现了这种方法，但是，我不仅需要一个“图像”按钮，但是上面显示文字的图像按钮，这个文字取决于视图模型的状态，所以我不能简单地将它放在图像上。

这是我的（Razor）：

@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>

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

Answer 2

Rex（请参阅我上面的问题的评论）建议将填充顶部放到CSS中，这解决了问题，但没有引起附带布局问题。

谢谢大家的快速回复！

Answer 3

我知道它有点晚了但你也可以使用行高：50px;垂直居中你的文字

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

3 个答案: