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

小编典典

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

css

我想在选择框中垂直对齐文本。我尝试使用

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

谢谢！

阅读 286

2020-05-16

共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>

2020-05-16