Vertical alignment in css

Question

Here is my code

<div style="margin:0;padding:0;vertical-align:text-top; border:1px solid red;float:right;">
     <span>Key:</span>
     <asp:TextBox ID="tbKey" MaxLength="16" runat="server" ></asp:TextBox>
     <asp:ImageButton ID="btnRefresh" runat="server" imageUrl="_img/btn_submit.gif" Height="22" Width="52" />
</div>

I would like all three elements to simply line up. Is this doable?

Edition: Source code (displayed)

 <div style="margin:0;padding:0;vertical-align:text-top; border:1px solid red;float:right;">
                <span>Key:</span>
                <input name="tbKey" type="text" maxlength="16" id="tbKey" />

                <input type="image" name="btnRefresh" id="btnRefresh" src="_img/btn_submit.gif" style="height:22px;width:52px;border-width:0px;border-width:1px;" />

            </div>

Answer 1

I usually use

 display: inline-block;

in this situation. This should lead to respect for the layout.

vertical-align: top;

regulations.

This is similar to @Jason Ellis solution table-cell, but more semantic as it is not a table.

Answer 2

Try to indicate the attribute vertical-align: text-topon the button. In CSS:

#btnRefresh
{
    vertical-align: text-top;
}

Or add VerticalAlign="Top"an ImageButton to your control (not sure how the latter translates to CSS).

Answer 3

vertical-align: top; ( ) , div. , div display: inline; .

Answer 4

CSS- :

div{
  display: table-cell;
  vertical-align: top;
}