Alineación vertical de elementos de entrada

Question

Tengo un problema con el siguiente código. Tengo un div completamente posicionado, dentro del cual tengo 3 elementos: 1 entrada de texto, 1 contraseña y un botón que contiene una imagen. El marcado es el siguiente:

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

Y el 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; 
} 

Parece como si los dos primeros elementos están situados en la parte inferior de la div, y el botón se encuentra en la parte superior. Me gustaría alinear verticalmente los 3 elementos en el medio del div, pero después de probar varias combinaciones diferentes de relleno/margen no pude encontrar nada que se vea presentable en todos los navegadores. ¿Alguien tiene alguna experiencia con este problema?

Answer 1

Pruebe la propiedad vertical-align

input, button { 
    vertical-align:middle; 
} 

Answer 2

buena distribución vertical con display: list-item; en Align vertically input elements in div

No hubo suerte en Chrome/Firefox/Opera/Safari con vertical-align: …;