title: Vertically align label with input
body: <p>I am currently converting an old HTML form to not use tables. The label requires a fixed width, which I've achieved using an answer from this site. The current code is as follows:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="form"&gt;
      &lt;label for="field1"&gt;Name&amp;nbsp;&lt;/label&gt;
      &lt;input type="text" id="field1" value="default name" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>label {
      float: left;
      width: 50px;
      white-space: nowrap;
  }
  input {
      display: block;
      overflow: hidden;
      width: *;
  }
  #field1 {
      width: 150px;
  }
  </code></pre>
  
  <p>Currently, the label is vertically aligned at the top. How can I vertically align the label and field to the centre?</p>
  
  <p><strong>Edit</strong>: I'm getting a lot of answers to basically pad my label into the correct position via a specified number of pixels. I don't want to do that as it's basically hard-coding and not true vertical alignment to the middle.</p>
  
  <p>Following some advice I've received here, I've cleaned up my code some. See the above edited code.</p>
  
  <p>I've tried <code>vertical-align: middle;</code> in <code>label</code> but it doesn't work. Please note that the user's platform will be IE.</p>