垂直对齐的输入元素

Question

I'm having a bit of trouble with the following code. I have an absolutely positioned div, inside of which I have 3 elements: 1 text input, 1 password and a button containing an image. The markup is as follows:

<div id="credentials">
            <input type="text" id="username" /> 
            <input type="password" id="password" />
            <button type="submit" id="login"><img src="./img/login.png" alt="Submit" /></button> 
</div>

And the CSS:

div#credentials
{
    position: absolute;
    right: 5px;
    top: 10px;
    background-color: #494949;
}

#username
{
    font-family: 'Lucida Sans', Arial, Helvetica, sans-serif;
    font-size: 8pt;
    color: #AAA;
    padding: 3px;
    margin: 0px;
}

#password
{
    font-size: 8pt;
    color: #AAA;
    padding: 3px;
    margin: 0px;
}

#login
{   background: transparent;
    border: 0px;
    padding: 3px;
    cursor: pointer;
}

It looks as though the two first elements are situated at bottom of the div, and the button is situated at the top. I'd like to vertically align all 3 elements in the middle of the div, but after trying a number of different padding/margin combinations couldn't find anything that looks presentable across browsers. Does anyone have any experience with this issue?

Answer 1

Try the vertical-align property

input, button {
    vertical-align:middle;
}

Answer 2

Good vertical layout with display: list-item; at Align vertically input elements in div

No luck in Chrome/FireFox/Opera/Safari with vertical-align: …;