CODEWITHSUNDEEP
htmlcssinternet-explorer-8
Amit
Amit

Reputation: 1184

IE8 - Vertical alignment of a <select> element with a custom height

When applying a custom height on a select element, the text in IE8 is being vertically aligned to the bottom: http://jsfiddle.net/4DYPf/8/

<select>
    <option value="1">123</option>
    <option value="1">456</option>
</select>

select
{
   border: 2px solid #CDCDCD;
   height: 50px;   
}

Is there a way to align in to the middle?

Upvotes: 3

Views: 9309

Answers (2)

Matthew
Matthew

Reputation: 8416

If you add padding:1em 0px; to your select style it vertically aligns your text to the middle but also squashes the drop down arrow.

See example:http://jsfiddle.net/TfwsE/1/

Upvotes: 3

Ricardo Casta&#241;eda
Ricardo Casta&#241;eda

Reputation: 5812

This is no a css answer, but if you really need to center the text and you use jQuery, this is a way to fake that alignment:
http://jsfiddle.net/cadence96/7MZHv/1/
It consists of placing an absoluted span over the white space of the select tag, then the current text of the selected option will be inserted within this span. That way you can style its text the way you want.

Upvotes: 0

Related Questions