title: Vertical align img and text inside <p>
body: <p>I can't get the img and text in the span to be vertically aligned:  </p>
  
  <pre><code>  &lt;p class="login-button"&gt;
                      &lt;input type="submit" id="login-submit" value="Log On" /&gt;&lt;img style="padding-left:20px;" id="loadingDiv" src="/Content/ib/images/ajax-loader.gif" /&gt;
                      &lt;span id="error" style="color:red; padding-left:13px;"&gt;text &lt;/span&gt;
  
                  &lt;/p&gt;
  </code></pre>
  
  <p>Any ideas?
  I tried:</p>
  
  <pre><code>.login-button{ vertical-align:middle; height:30px; line-height:30px;}
  .login-button img{ vertical-align:middle;}
  </code></pre>