垂直對齊的輸入元素

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

嘗試垂直對齊屬性

input, button {
    vertical-align:middle;
}

Answer 2

良好的垂直布局並display: list-item; 在div中垂直對齊輸入元素

vertical-align: …; Chrome / FireFox / Opera / Safari沒有運氣vertical-align: …;