CODEWITHSUNDEEP
asp.net
ispiro
ispiro

Reputation: 27693

How do I center text in an ASP.Net Hyperlink?

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

Upvotes: 0

Views: 6282

Answers (2)

Mohammad Golahi
Mohammad Golahi

Reputation: 367

Add folowing attributes to the CssClass or the inline style:

{
 display: table-cell;
 vertical-align: middle;

 line-height: 32px;
}

note that replace "32px" with your height of Hyperlink.

Upvotes: 0

Forte L.
Forte L.

Reputation: 2812

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>

Upvotes: 1

Related Questions