我想在选择框中垂直对齐文本

Question

我想在选择框中垂直对齐文本.我试过用

select{
   verticle-align:middle;
}

但它不适用于任何浏览器.Chrome似乎将选择框中的文本与中心对齐为默认值.FF将其对齐到顶部,IE将其对齐到底部.有没有办法实现这个目标？我在UIBinder中使用GWT的Select小部件.

这是我现在拥有的:

select{
    height: 28px !important;
    border: 1px solid #ABADB3;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

谢谢!

Answer 1

您最好的选择可能是调整顶部填充并跨浏览器进行比较.它并不完美,但我认为它尽可能接近.

padding-top:4px;

您需要的填充量取决于字体大小.

提示:如果您的字体已设置px,请同时设置填充px.如果设置了字体em,也可以设置填充em.

编辑

这些是我认为您拥有的选项,因为纵向对齐在浏览器中并不一致.

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>

Answer 2

我偶然发现了这组css属性,这些属性似乎在Firefox中的大小选择元素中垂直对齐文本:

select
{
    box-sizing: content-box;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
}

但是,如果有的话,它会在IE8中将文本向下推得更远.如果我将box-sizing属性设置回border-box,它至少不会使IE8更糟(并且FF仍然应用-moz-box-sizing属性).为IE找到解决方案会很好,但我不会屏住呼吸.

编辑: 尼克斯.测试后它不起作用.但是,对于任何感兴趣的人来说,问题似乎源于FF的forms.css文件中的内置样式影响输入和选择元素.有问题的属性是line-height:normal!important.它不能被覆盖.我试过了.我发现如果我删除Firebug中的内置属性,我会得到一个具有合理垂直居中文本的select元素.

Answer 3

我的解决方案是添加padding-top为select目标到firefox只是这样

// firefox vertical aligment of text
@-moz-document url-prefix() {
    select {
        padding-top: 13px;
   }
}