ASP.NET: ImageButton not in the middle

Question

I worked over 1 hour on a 1-pixel-thing, here is the code:

                <div id="Zeitraum" style="border: 1px solid black; width: 200px; padding:5px;">
                Zeitraum:
                <asp:DropDownList  ID="ddlZeit" runat="server" >
                    <asp:ListItem Text="10 Tage" Value="10"></asp:ListItem>
                    <asp:ListItem Text="30 Tage" Value="30"></asp:ListItem>
                    <asp:ListItem Text="60 Tage" Value="60"></asp:ListItem>
                    <asp:ListItem Selected="true" Text="Alle" Value="100"></asp:ListItem>
                </asp:DropDownList>
                &nbsp;
                <asp:ImageButton ID="imgSend" runat="server" ImageUrl="~/Images/Icons/NavForward.png" Width="15px" Height="15px" style="" />
            </div>

Here is the image: http://s2.imgimg.de/uploads/Capture04273f43PNG.png

The ImageButton is not in the middle like the text and the DropDownList. Why? I tried margin and padding and many many other things, but nothing helped.

Answer 1

Changing margin or padding won't help you, as it's an inline html element and you'll just set margin/padding against the containing box for the whole row. Look at vertical-align instead.

Answer 2

You could move the button lower by setting following style: <asp:ImageButton ID="imgSend" runat="server" ImageUrl="~/Images/Icons/NavForward.png" Width="15px" Height="15px" style="position: relative; top: 2px" />

Answer 3

put table in div as like this, I have tested it my machine, it is looking fine now...

<div id="Zeitraum" style="border: 1px solid black; width: 200px; padding: 5px;">
    <table>
        <tr>
            <td>
                Zeitraum:
            </td>
            <td>
                <asp:DropDownList ID="ddlZeit" runat="server">
                    <asp:ListItem Text="10 Tage" Value="10"></asp:ListItem>
                    <asp:ListItem Text="30 Tage" Value="30"></asp:ListItem>
                    <asp:ListItem Text="60 Tage" Value="60"></asp:ListItem>
                    <asp:ListItem Selected="true" Text="Alle" Value="100"></asp:ListItem>
                </asp:DropDownList>
            </td>
            <td>
                <asp:ImageButton ID="imgSend" runat="server" ImageUrl="~/Images/Icons/NavForward.png"
                    Width="15px" Height="15px" />
            </td>
        </tr>
    </table>
</div>

Answer 4

Set the vertical-align CSS property on the DropDownList, not the ImageButton. Unfortunately this property seems to give wildly different results across browsers and browser versions.