下拉列表样式，无法获得正确的填充

Question

现在看起来似乎是一项轻松的任务令人费解。 我有一个dropdownlist (@html.dropdownlistfor(model))，我通过css ( new { @class = "searchDropDownList" } )

设置样式

问题是，标准下拉列表太短（高度方面），但是当我添加高度以使框更大时，所选项目不再居中。 vertical-align: middle无法处理所选项目。

当我在框的顶部添加填充时，文本会根据需要向下移动，但是当您将文本框悬停时，您可以看到选择箭头被破坏，因为那些也会下降。

见图片：

• Firefox ：

• Chrome ：

有谁知道如何降低文字？

编辑： 目前的css：

.searchDropDownList {
  display: inline;   
  width: 114px;
  height: 26px;
  float: left;
  font-size: 14px;
  margin: 4px auto auto 2px;
  text-align: left;
  vertical-align: middle;      
  padding-left: 2px;
  padding-top: auto;
  line-height: 10px; 
}

将padding-top: auto;更改为3px会导致上面张贴的图片。