我想在选择框中垂直对齐文本 [英] I want to vertical-align text in select box

问题描述

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

I want to vertically align the text in select box. I tried using

select{
   verticle-align:middle;
}

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

however it does not work in any browsers. Chrome seems to align the text in select box to the center as a default. FF aligns it to the top and IE aligns it to the bottom. Is there any way to achieve this? I am using GWT's Select widget in UIBinder.

这是目前我有的：

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

谢谢！

推荐答案

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

Your best option will probably be to adjust the top padding & compare across browsers. It's not perfect, but I think it's as close as you can get.

padding-top:4px;

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

The amount of padding you need will depend on the font size.

提示：如果您的字体设置在 px 中，请在 px 中设置填充。如果您的字体设置在 em 中，请同时设置 em 中的填充。

Tip: If your font is set in px, set padding in px as well. If your font is set in em, set the padding in em too.

EDIT

这些是我认为你的选项，因为vertical-align不是跨浏览器。

These are the options I think you have, since vertical-align isn't consistant across the browsers.

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

A. Remove height attribute and let the browser handle it. This usually works the best for me.

 <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. Add top-padding to push down the text. (Pushed down the arrow in some browsers)

<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. You can make the font larger to try and match the select height a little nicer.

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

这篇关于我想在选择框中垂直对齐文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！