Pionowe wyrównanie elementów wejściowych

Question

Mam trochę problemów z następującym kodem. Mam absolutnie umiejscowiony div, wewnątrz którego mam 3 elementy: 1 wejście tekstowe, 1 hasło i przycisk zawierający obraz. Znacznik jest następujący:

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

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

Wygląda to tak, jakby te dwa pierwsze elementy są umieszczone w dolnej części div, a przycisk znajduje się na górze. Chciałbym wyrównać w pionie wszystkie 3 elementy w środku elementu div, ale po wypróbowaniu wielu różnych kombinacji wypełnień/marginesów nie można znaleźć niczego, co wygląda dobrze w różnych przeglądarkach. Czy ktoś ma jakiekolwiek doświadczenie z tym problemem?

Answer 1

Spróbuj z obiektem vertical-align

input, button { 
    vertical-align:middle; 
} 

Answer 2

Dobry układ pionowy z display: list-item; w Align vertically input elements in div

nie ma szczęścia w Chrome/Firefox/Opera/Safari z vertical-align: …;