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

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

select{
   verticle-align:middle;
}

但它不工作在任何浏览器。 Chrome似乎会将选择框中的文本与默认中心对齐。 FF将其对齐到顶部，IE将它对齐到底部。有什么办法实现这个吗？我在UIBinder中使用GWT的选择小部件。@H_404_5@

这是目前我有：@H_404_5@

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

谢谢！@H_404_5@

解决方法

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

padding-top:4px;

所需的填充量将取决于字体大小。@H_404_5@

提示：如果您的字体设置为px，请在px中设置填充。如果你的字体设置在em，设置填充em。@H_404_5@

编辑@H_404_5@

这些是我认为你有的选项，因为vertical-align在浏览器之间并不一致。@H_404_5@

A.删除height属性，并让浏览器处理它。这通常对我来说是最好的。@H_404_5@

<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.添加顶部填充以向下推文本。 (在某些浏览器中按下箭头)@H_404_5@

<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.你可以使字体更大，尝试匹配选择的高度一点更好。@H_404_5@

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

原文链接：https://www.f2er.com/css/223408.html

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

解决方法

猜你在找的CSS相关文章