ASP.NET - Text Alignment

I've got an alignment issue:

What I need is for the 'Delete Reasons' text to be vertically aligned, centered with the red 'X'. I tried using a div tag with CSS a开发者_开发技巧nd style="verticalalign: middle;" but it forced 'Delete Reasons' to go underneath the 'X'.

How can I vertically center the text? Any help is greatly appreciated!

PS - Here's the code:

 <tr>
     <td class="style7" valign="middle">
         <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
              <asp:ImageButton ID="ibClearReasons" runat="server" Height="30px" Width="30px" ImageUrl="~/Images/DeleteRed.png" AlternateText="Delete" />Delete Reasons
            </ContentTemplate>
         </asp:UpdatePanel>
     </td>

     <td class="style6">
         <asp:LinkButton ID="SendToBatch" runat="server" BackColor="#20548E" BorderColor="#20548E" BorderStyle="Solid" Font-Names="Tahoma" Font-Size="Small" Font-Underline="False" 
                                 ForeColor="White" Height="16px" Width="85px" EnableViewState="True" CausesValidation="False"><center>Send To Batch</center></asp:LinkButton>&#160;&#160;&#160;&#160;
     </td>
 </tr>

EDIT: CSS Style 7:

.style7
    {
        text-align: left;
        vertical-align: middle;
    }

You have to set the vertical-align attribute on the element: http://jsfiddle.net/rkw79/Zs5AH/

There is a good chance that it will still look off if the img height is small. For issues like that, you would need to wrap 'delete reasons' inside a <span> tag and give it a padding-top attribute.

Try this...

<td class="style7" valign="middle">
     <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div style="float:left;margin:0px 4px;width:30px;">
                <asp:ImageButton ID="ibClearReasons" 
                                 runat="server" 
                                 Height="30px" 
                                 Width="30px" 
                                 ImageUrl="~/Images/DeleteRed.png" 
                                 AlternateText="Delete" />
            </div>
            <div style="float:left;height:30px;padding:6px 0px;width:100px;">
                 Delete Reasons
            </div>
            <div style="clear:both"></div>
        </ContentTemplate>
     </asp:UpdatePanel>
 </td>

You may have to play with the padding and/or width on the second div to get it to be just right. If this works, you can simply move the inline styles to a css file with class names (div.className) HTH