Question

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

Answer 1

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.