Vertical align middle for drop-down list

Question

I am styling a asp:DropDownList element with custom CSS. I have set the height and am trying to get the text to appear in the middle of the element, rather than at the bottom. Vertical-align:middle does not seem to work, and if I add padding-bottom to push it up from the bottom, in IE there is an ugly gap between the arrow on the right of the drop-down and the border. This is my CSS currently:

.dropdowndiv
{
    font-size:10pt;
    margin-bottom:2px;
    height:26px;
    width:220px;
    border:1px solid #d5d5d5;
    text-transform:uppercase;
    vertical-align:middle;
}

Answer 1

Adding a line height of 26px should align your text to the middle.

Answer 2

Try this:

.dropdowndiv
{
    font-size:10pt;
    padding-bottom:4px;
    height:26px;
    width:220px;
    border:1px solid #d5d5d5;
    text-transform:uppercase;
    vertical-align:middle;
}

I changed the margin-bottom setting of 2px to a padding-bottom of 4px.

UPDATE:

Looked fine on mine, but you can add padding to any side to get it the way you wish.

Failing that you may want to look at Tag mapping - Lee Dumond suggested this on his blog in response to a similar problem I was experiencing at the time:

http://leedumond.com/blog/fixing-asp-net-server-control-rendering-issues-with-tag-mapping/