IE8 - < select>的垂直对齐元素与自定义高度 [英] IE8 - Vertical alignment of a <select> element with a custom height

问题描述

在选择元素上应用自定义高度时，IE8中的文本与底部垂直对齐：
http://jsfiddle.net/4DYPf/8/

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

有没有办法对齐中间？

推荐答案

这不是一个css答案，但如果你真的需要中心的文本，并使用jQuery，这是一种假冒对齐方式：

http://jsfiddle.net/cadence96/7MZHv/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.

这篇关于IE8 - < select>的垂直对齐元素与自定义高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！