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?

回答1:

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.

回答2:

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/

来源：https://stackoverflow.com/questions/9200618/ie8-vertical-alignment-of-a-select-element-with-a-custom-height