title: Vertically Aligning Input Elements
body: <p>I'm having a bit of trouble with the following code. I have an absolutely positioned div, inside of which I have 3 elements: 1 text input, 1 password and a button containing an image. The markup is as follows:</p>
  
  <pre><code>&lt;div id="credentials"&gt;
              &lt;input type="text" id="username" /&gt; 
              &lt;input type="password" id="password" /&gt;
              &lt;button type="submit" id="login"&gt;&lt;img src="./img/login.png" alt="Submit" /&gt;&lt;/button&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>It looks as though the two first elements are situated at bottom of the div, and the button is situated at the top. I'd like to vertically align all 3 elements in the middle of the div, but after trying a number of different padding/margin combinations couldn't find anything that looks presentable across browsers. Does anyone have any experience with this issue?</p>