Question

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 centered, 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.

Answer 1

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/