Align label and text field vertically in all browsers

Question

Is there an easy way to align the label with a text box in all major browsers (i.e. including IE7? I set the display of the inline block on my shortcut and text box, which seems to work everywhere, but in IE7, where the label is included at the bottom of the div .

<label class="inputLabel" for="emailTextBox"> Email:</label> <input class="textBox" type="text" id="emailTextBox" value=" Email address" /> input.textBox { margin-top: 5px; margin-bottom: 5px; height: 30px; width: 350px; font-size: 15px; font-family: Verdana; line-height: 30px; display:inline-block; } label.inputLabel { font-family: Verdana; font-size: 15px; line-height: 30px; display:inline-block; } 

Answer 1

The display:inline-block declaration is not supported by fully supported IE7 and lower, so you should use display:inline instead in combination with zoom:1 hasLayout hack to mimic the ad by breaking the star in IE7. To align the text box and the label, we can use the vertical-align:middle property, for example:

CSS

 input.textBox { margin-top: 5px; margin-bottom: 5px; height: 30px; width: 350px; font-size: 15px; font-family: Verdana; line-height: 30px; display:inline-block; *display: inline; /* for IE7*/ zoom:1; /* for IE7*/ vertical-align:middle; } label.inputLabel { font-family: Verdana; font-size: 15px; line-height: 30px; display:inline-block; *display: inline; /* for IE7*/ zoom:1; /* for IE7*/ } 

Demo