Html.ActionLink as an image button with vertically-centered text?

Question

Simply put the question is - is there a way to align link text within an action link vertically?

I need to make a button-looking Html.ActionLink control. There is a reasonably good example at Html.ActionLink as a button or an image, not a link

I have implemented this approach, however, I need not just an "image" button, but an image button with a text shown on it, and this text depends on view model's state, so that I cannot simply put it on an image.

Here is what I have (Razor):

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

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

}

The result is OK, but: the text of a link is located on the top of an image, and not in its middle (vertically). I do not know how to center link text vertically, so that it can be located right in the center of an image.

Of course, there can be another approach (see below) but maybe it is still possible with approach mentioned above?

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

Rex, that worked - thank you a lot! Can you put that as an answer so that I can close question? (My reputation is still too small to answer my own questions) — freeliner, Aug 14 '13 at 08:27

score 1 · Answer 1 · answered Aug 14 '13 at 08:44

Try the following changes in your 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;
}

freeliner · Accepted Answer · 2013-08-15T08:05:49.420

0

Rex (see comments to my question above) suggested putting padding-top to CSS, that has resolved issue without causing collateral layout problems.

Thank you all for your quick reply!

edited Aug 15 '13 at 08:05

answered Aug 15 '13 at 07:59

freeliner

49
3
12

score 0 · Answer 3 · answered Jan 17 '14 at 14:48

0

I know it's a bit late but you could also use line-height: 50px; to center your text vertically

answered Jan 17 '14 at 14:48

HoXa

153
9

Html.ActionLink as an image button with vertically-centered text?

3 Answers3