Question

I have an ASP.Net Hyperlink with a set height. The text is rendered at the top left of it. How do I vertically center it (-the text)?

(In C# I’d have: label1.TextAlign = ContentAlignment.MiddleCenter; . How is it done in ASP.Net?)

Tried the following but it doesn’t work (neither on FF nor on IE).

<form id="form1" runat="server">
<div>
<asp:HyperLink NavigateUrl="~/WebForm1.aspx" runat="server" CssClass="MyClass" BackColor="White" 
Height="100px" Text="MyText"  Width="200px" ></asp:HyperLink>
</div>
</form>

And:

.MyClass
{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

Answer 1

Add the following styles to your HyperLink:

display:table-cell;
text-align:center;
vertical-align:middle;

If you are going to reuse that style is better to define a class:

<asp:HyperLink ... class="myClass" >HyperLink</asp:HyperLink>

and then in your stylesheet:

.myClass{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

Or add the styles inline:

<asp:HyperLink ... style="display:table-cell;text-align:center;vertical-align:middle;" >HyperLink</asp:HyperLink>