1

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

我需要制作一个看起来像按钮的 Html.ActionLink 控件。在Html.ActionLink 有一个相当好的例子，作为按钮或图像，而不是链接

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

这是我所拥有的（剃刀）：

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

3 回答 3

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;
}
于 2013-08-14T08:44:06.433 回答
0

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

谢谢大家的快速回复！

于 2013-08-15T07:59:32.893 回答
0

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

于 2014-01-17T14:48:25.680 回答