title: CSS Vertical align middle
body: <p>I am trying to vertically align a SPAN element in the middle of a parent element.</p>
  
  <p>This is what I am doing:</p>
  
  <p><img src="https://i.stack.imgur.com/jckLj.png" alt="enter image description here"></p>
  
  <p>I am trying to get both the username and password labels to be vertically aligned (middle) with the input boxes.</p>
  
  <p>This is my HTML code:</p>
  
  <pre><code>&lt;div class="login_field_wrap"&gt;
      &lt;span&gt;Username&lt;/span&gt;
      &lt;input type="text" autocomplete="off" spellcheck="off" id="username" name="username"&gt;
      &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is what I have tried:</p>
  
  <pre><code>.clear { clear:both; }
  .login_field_wrap span {
  float:left; vertical-align:middle; font-size:13px; color:#333; font-weight:bold; }
  .login_field_wrap input {
  float:right; vertical-align:middle; padding:8px 5px; border:solid 1px #AAA;
  margin:0px; width:250px; }
  </code></pre>
  
  <p>Vertically aligning an image element inside of this wrapping DIV works absolutely fine, well in Chrome anyway, it just won't align with my SPAN!</p>
  
  <p>Any help would be amazing.</p>