Centering a label + dropdown inside of a div

I have the following html:

A div, which contains a label and a drop down list (select) for that label. Putting a vertical-align:center on both the label and dropdown, the result is that the label is center开发者_运维问答ed, but the dropdown is not centered. What I consider centered is "equal spacing above and below the dropdown". What IE apparently considers centered is aligning the bottom of the drop down list with the bottom of the label, which, unfortunately, does not look very good. How can I fix this?

edit: It isn't urgent since position:relative; easily fixed the issue but using position:relative; annoys me and shouldn't be necessary.

You are basically missusing vertical-align property. It will work as you intended only in a table cell. Not on a div. Also it is vertical-align:middle; not center.

vertical-align:middle: Aligns the vertical midpoint of the element with the baseline of the parent element plus half the x-height of the parent.

I think this article explains it clearly why: http://www.ibloomstudios.com/articles/vertical-align_misuse/

The key is baseline here as this is the point towards which the element get's aligned.

Sample: http://jsfiddle.net/easwee/kabBF/7/

Vertical centering is kind of a pain in the butt...

In a nut shell you need to give the element an absolute position with top:50%. As top is measured by the containing element's height. This will put the top of the element halfware down the container. Then you give it a negative top margin of half the element to be centered's height.