我想在选择框中垂直对齐文本。我试过使用
select{
verticle-align:middle;
}
但它不工作在任何浏览器。 Chrome似乎会将选择框中的文本与默认中心对齐。 FF将其对齐到顶部，IE将它对齐到底部。有什么办法实现这个吗？我在UIBinder中使用GWT的选择小部件。
这是目前我有：
select{
height: 28px !important;
border: 1px solid #ABADB3;
margin: 0;
padding: 0;
vertical-align: middle;
}
谢谢！
解决方法
你最好的选择可能是调整顶部填充&跨浏览器进行比较。这不是完美的，但我认为它是尽可能接近你可以得到。
padding-top:4px;
所需的填充量将取决于字体大小。
提示：如果您的字体设置为px，请在px中设置填充。如果你的字体设置在em，设置填充em。
编辑
这些是我认为你有的选项，因为vertical-align在浏览器之间并不一致。
A.删除height属性，并让浏览器处理它。这通常对我来说是最好的。
<style>
select{
border: 1px solid #ABADB3;
margin: 0;
padding: auto 0;
font-size:14px;
}
</style>
<select>
<option>option 1</option>
<option>number 2</option>
</select>
B.添加顶部填充以向下推文本。 (在某些浏览器中按下箭头)
<style>
select{
height: 28px !important;
border: 1px solid #ABADB3;
margin: 0;
padding: 4px 0 0 0;
font-size:14px;
}
</style>
<select>
<option>option 1</option>
<option>number 2</option>
</select>
C.你可以使字体更大，尝试匹配选择的高度一点更好。
<style>
select{
height: 28px !important;
border: 1px solid #ABADB3;
margin: 0;
padding: 0 0 0 0;
font-size:17px;
}
</style>
<select>
<option>option 1</option>
<option>number 2</option>
</select>
