Vertikale Ausrichtung der Eingangselemente

Question

Ich habe ein paar Probleme mit dem folgenden Code. Ich habe ein absolut positioniertes Div, in dem ich 3 Elemente habe: 1 Texteingabe, 1 Passwort und eine Schaltfläche mit einem Bild. Das Markup ist wie folgt:

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

Und die 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; 
} 

Es sieht aus, als ob die beiden ersten Elemente im Boden des div befinden und die Taste an der Spitze gelegen. Ich würde gerne alle 3 Elemente in der Mitte des Div vertikal ausrichten, aber nach dem Versuch, eine Reihe von verschiedenen Padding/Margin-Kombinationen konnte nichts finden, das in Browsern präsentierbar aussieht. Hat jemand Erfahrung mit diesem Problem?

Answer 1

Versuchen Sie, die vertical-align Eigenschaft

input, button { 
    vertical-align:middle; 
} 

Answer 2

Gut vertikales Layout mit display: list-item; bei Align vertically input elements in div

Kein Glück in Chrom/FireFox/Opera/Safari mit vertical-align: …;