Vertically align label with input
<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>