Alignement vertical des éléments d'entrée

Question

Je rencontre un problème avec le code suivant. J'ai un div absolument positionné, à l'intérieur duquel j'ai 3 éléments: 1 entrée de texte, 1 mot de passe et un bouton contenant une image. Le balisage est la suivante:

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

Et le 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; 
} 

Il semble que les deux premiers éléments sont situés au fond de la div, et le bouton est situé en haut. Je voudrais aligner verticalement tous les 3 éléments au milieu de la div, mais après avoir essayé un certain nombre de différentes combinaisons de marge/marge ne pouvait pas trouver tout ce qui semble présentable à travers les navigateurs. Quelqu'un at-il une expérience avec ce problème?

Answer 1

Essayez la propriété verticale align

input, button { 
    vertical-align:middle; 
} 

Answer 2

Bonne mise en page verticale avec display: list-item; à Align vertically input elements in div

Pas de chance dans Chrome/FireFox/Opera/Safari avec vertical-align: …;