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

select{
   verticle-align:middle;
}

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

你最好的选择可能是调整顶部填充&am​​p;跨浏览器进行比较。这不是完美的，但我认为它是尽可能接近你可以得到。

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>