Tuesday, March 13, 2012

Setting the Text alignment on an ASP:Label

Hi,

I hope this is a stupid question with an easy answer. As you can see in the code snippet below, I have an asp:label in a table element. I need to have the text in the label aligned with the right side of the <TD> element. I am not finding any align or alignment property on the control. Anyone know how to get my label text to align itself against the right side?

<td valign="top" bgcolor="#0b386f" colspan="1" height="40" width="175">
<asp:Label id="lblBannerSysDate" runat="server" Width="174px" Height="32px" CssClass="banner">lblSysDate</asp:Label>
</td
Thank you,The alignment inside a table cell is setby the table cell itself.

So:

<td valign="top" bgcolor="#0b386f" colspan="1" height="40" width="175"align="right">
<asp:Label id="lblBannerSysDate" runat="server" Width="174px" Height="32px" CssClass="banner">lblSysDate</asp:Label>
</td>

Thanks for the reply.

When I put the align=right attribute in the td tag I can see the change in the Design mode for the Page, however, when I execute the Page, the text is still not lining up with the right! In Design mode the Label can not be moved any more to the right. I am perplexed. I even used the ToString().TrimEnd(); on the label text.

Do you have any more suggestions?

Thanks,
I don't use VS.NET, so I couldn't advise on Design mode ...

However, do you mean that the text is not aligningat all to the right? Or just not all the way to the right of the cell?

If the latter, you probably need to set the cellpadding and callspacing attributes of the table to zero, otherwise it will seem padded out:

<table cellspacing="0" cellpadding="0" border="1" width="80%">
<tr>
<td align="right">this should be flush to the right-hand side of the table</td>
</tr>
</table
<table border="1" width="80%">
<tr>
<td align="right">this should be at the right-hand side of the table, but with a padding of about 8px</td>
</tr>
</table>

Also, remember that the width of the asp:Label control is only the width of its Text property (and not the width of its container, whether that is a table cell or the page iteself).
Yup, you are right. Since I am starting to work with Web pages, I figured maybe I should finally learn HTML. Doh! I also just found out that the align in the img tag tells the browser what side to put any text that is in the same cell as the image. Therefore, I tried the in the cell with the img align=left. It worked. Thanks for your help.
Just for the sake of learning HTML, I'll show you the method I would use to align an image to the left, while the text goes to the right:

<table cellspacing="0" cellpadding="0" border="1" width="450">
<tr>
<td colspan="3">This heading will span the image cell, the text cell, and the button cell</td>
</tr>
<tr>
<td width="50px">Image</td>
<td width="350px">Text here</td>
<td width="50px">Button</td>
</tr>
<tr>
<td width="50px">Image2</td>
<td width="350px">More text here</td>
<td width="50px">Button2</td>
</tr>
</table>

On a side note...
Learn CSS, it's THE standard way to style your web page
I wouldn't suggest CSS is the "standard" way. Itshould be, but few websites use CSS the way it was intended. (After all, CSS was introduced to style XHTML ... it's been "hacked" back to work with HTML 4.)

pdtt, if you care for an example of what we mean by CSS, have a look atthis thread where I recreate a table using CSS, and reduce the page size by about 40%.
Thanks for the replies. Your tips and examples are helping me to organize my page templates. I have the aligment working now.

0 comments:

Post a Comment