वर्टिकल रूप से इनपुट तत्वों को संरेखित करना

Question

मुझे निम्न कोड के साथ कुछ परेशानी हो रही है। मेरे पास एक बिल्कुल स्थित डिवीजन है, जिसके अंदर मेरे पास 3 तत्व हैं: 1 टेक्स्ट इनपुट, 1 पासवर्ड और एक बटन वाला एक बटन।

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

और सीएसएस: मार्कअप इस प्रकार है

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

यह है जैसे कि दो पहले तत्व div के तल पर स्थित हैं लग रहा है, और बटन शीर्ष पर स्थित है। मैं div के बीच में सभी 3 तत्वों को लंबवत रूप से संरेखित करना चाहता हूं, लेकिन विभिन्न पैडिंग/मार्जिन संयोजनों की कोशिश करने के बाद ब्राउज़र में मौजूद दिखने योग्य कुछ भी नहीं मिला। क्या किसी को इस मुद्दे के साथ कोई अनुभव है?

Answer 1

ऊर्ध्वाधर- align संपत्ति

input, button { 
    vertical-align:middle; 
} 

Answer 2

अच्छा खड़ी vertical-align: …;

साथ Align vertically input elements in div

क्रोम/फ़ायरफ़ॉक्स/ओपेरा/सफारी में कोई भाग्य पर display: list-item; साथ लेआउट का प्रयास करें