垂直对齐输入元素

Question

我在使用以下代码时遇到了一些麻烦.我有一个绝对定位的div,其中我有3个元素:1个文本输入,1个密码和一个包含图像的按钮.标记如下:

<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>

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

看起来好像两个第一个元素位于div的底部,按钮位于顶部.我想垂直对齐div中间的所有3个元素,但在尝试了许多不同的填充/边距组合后,找不到任何看起来在浏览器中可见的内容.有没有人有这个问题的经验？

Answer 1

尝试vertical-align属性

input, button {
    vertical-align:middle;
}