css and positioning

i have a form element- text input and a submit button- Im trying to get them to render inline with each, the submit button renders slightly above the input button- i tried wrapping the two in a div and making the maximum height the same still didnt work. Here's my code/css- the button has a height of 29px- they are both in line

<div class="submit_form">
    <input type="text" name="unique_code" class="unique_code"/>
    <input type="image" name="submit_btn" src="/imgs/submitbg.png"/>
</div>


.submit_form{
        height:30px;

    }
.unique_code{
        background-color:#000;
        border: 1px solid #e31e25;
        width:250px;
        height:25px;
    开发者_Python百科    color:#fff;

    }

Change your CSS to this:

    .submit_form *
    {
        height: 30px;
        display: inline;
        vertical-align: middle;
    }

It should work now. Have tested it in IE and Chrome.

Simply add vertical-align to the textbox:

.unique_code{
     vertical-align: top;
     background-color:#000;
     border: 1px solid #e31e25;
     width:250px;
     height:25px;
     color:#fff;
}

Try this.

// css
.img_fix {
    vertical-align: text-top    
}
// html
<input type="image" name="submit_btn" class='img_fix' src="http://www.google.com/images/nav_logo29.png"/>