How to align a label to the top of a row in a table asp.net C#

Question

I have a table in my asp.net page. The controls that I am trying to align is a label, and a textbox. I have both controls in one row in the table. No matter how I try to align the label, it displays from the bottom of the row. How can I align the label to display in the center or the top of the row?

Here is my html aspx code:

<tr>
            <td colspan="4">
                <span>
                    <asp:Label class="field" ID="Label9" runat="server" Text="Comments:"></asp:Label>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
    <asp:TextBox ID="TB_Comments" runat="server" TextMode="MultiLine" Width="500px" Height="50px"></asp:TextBox>
                </span>

            </td>
        </tr>    

Here is my style code:

<style type="text/css">   
.field label,
.field select
{
    display: inline-block;
    vertical-align: top;

}
    </style>

Also is there a way for me to align the label control to the top or center via the codebehind and not using HTML? Thanks for any input.

Answer 1

Use css classes for this. i.e.

 <td class="label_topped">
    <asp:Label ID="Label1" runat="server" Text="PO Number:"></asp:Label> 
 </td>

where the class will be:

.label_topped {
  vertical-align:top;
 }

note the class is applied to the cell () and not the label.

A quicker alternative is to do a direct style on the cell i.e

 <td style="vertical-align:top">
   <asp:Label ID="Label1" runat="server" Text="PO Number:"></asp:Label> 
 </td>

hope that helps.