How to set vertical align of inline object like label or span is in line that set text align equals center for IE7-8?

The above image is the HTML for filtering some data in my website. I have 2 labe开发者_如何学Pythonls and 2 selections in this text align center line. All elements are displayed as inline. Everything is perfectly work on IE9 RC and Chrome 9. But it does not work on IE7 and IE8 because text in all labels is display at the bottom of line like the following image.

Do you have any CSS for this problem? You can edit my jsFiddle for trying to solve this question.

http://www.jsfiddle.net/AaDkd/

Update #1 I try to set line-height of all related element with the height of current line. But it does not work on IE7.

Source code: http://jsfiddle.net/AaDkd/1/

Demo: http://fiddle.jshell.net/AaDkd/1/show/

Update #2

As you see, I remove all styles of controls but the vertical-center of text in selection and label do not exactly equal when I use IE7. This occurs because default height of selection (that impossible to adjust in IE7) and height of label or span do not equal.

Source code: http://jsfiddle.net/AaDkd/5/

Demo: http://fiddle.jshell.net/AaDkd/5/show/

PS. Don't forget that text-align of this line is center.

Thanks,

Looking at your example, the following CSS works right for me in IE8, FF, Chrome.

label, select, button {
    vertical-align: middle;
}

UPDATE: I checked it out on IE7, and if you don't set those line-height and height stuff on the select, it works fine. The only thing is that you cannot change the height of a select in IE7, as it seems to me.

UPDATE2: This is how your Update#2 Fiddle displays for me in IE7: