CODEWITHSUNDEEP
asp.netcss
alpheus
alpheus

Reputation: 989

Vertical align middle for drop-down list

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;
}

Upvotes: 3

Views: 10962

Answers (2)

IrishChieftain
IrishChieftain

Reputation: 15253

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/

Upvotes: 1

racurry
racurry

Reputation: 422

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

Upvotes: 0

Related Questions