Căn chỉnh các yếu tố đầu vào theo chiều dọc

Question

Tôi đang gặp một chút rắc rối với mã sau đây. Tôi có một div hoàn toàn vị trí, bên trong mà tôi có 3 yếu tố: 1 văn bản đầu vào, 1 mật khẩu và một nút có chứa một hình ảnh. Đánh dấu như sau:

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

Và 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; 
} 

Có vẻ như hai yếu tố đầu tiên được nằm ở phía dưới của div, và nút nằm ở đầu trang. Tôi muốn sắp xếp theo chiều dọc tất cả 3 phần tử ở giữa div, nhưng sau khi thử một số kết hợp đệm/lề khác nhau không thể tìm thấy bất kỳ thứ gì có thể hiển thị trên các trình duyệt. Có ai có kinh nghiệm với vấn đề này không?

Answer 1

Hãy thử tài sản vertical-align

input, button { 
    vertical-align:middle; 
} 

Answer 2

Tốt bố trí dọc với display: list-item; tại Align vertically input elements in div

Không may mắn trong Chrome/FireFox/Opera/Safari với vertical-align: …;