IE7 align vertically “inline” elements

Question

I've a problem with IE7.. I added padding to my inputs (top and bottom). In Firefox and others, the label shows in the middle, but in IE7, it shows at the bottom.. and in IE8, at the top.

I tried to set label vertical-align:middle style, but it doesn't work.

Its fiddle: http://jsfiddle.net/w2wTA/4/

Answer 1

Try setting a height for the 'field' div, and setting the line-height attribute equal to that:

#field {
    height: 40px;
    line-height: 40px;
}

edit

You could also try adding a class to both the label and the input, setting the padding:

<div id="field">
    <label for="t" class="t">Input:</label> <input type="text" id="t" class="t">
</div>

css: (somehow, inline-block is not working, so block with a float will do the trick, though I find this a bit of a 'dirty hack')

.t{
    padding: 10px 0;
}

label{
    vertical-align: middle;
    display: block;
    float: left;
}

This seems to work. Fiddle