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

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

谢谢！

- user_1357

---

font-size:22px; 是一个选项吗？ - Kerem Baydoğan

我已经将字号设置为14像素。我不认为这在所有浏览器中都起作用... - user_1357

你的第一个例子中显示的是"verticle-align"而不是"vertical-align"——这类笔误肯定会给你带来麻烦。 - Paul Jowett

2016年仍然存在这个问题！ - Triynko

Answer 1

你最好的选择可能是调整顶部填充并在各个浏览器之间进行比较。这不是完美的，但我认为这是你能做到的最接近的方法。

padding-top:4px;

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

提示：如果您的字体设置为 px，则填充也应该以 px 为单位。如果您的字体设置为 em，则填充也应该以 em 为单位。

编辑

我认为您有以下几个选项，因为在各种浏览器中垂直对齐并不一致：

A. 删除高度属性，让浏览器自行处理。这通常对我来说效果最好。

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

- user401183

---

感谢您提供清晰的示例。我尝试了选项2，它为选择框的文本框部分添加了填充，因此用于扩大列表的箭头按钮保持不变...增加字体大小不是一个选项，所以我需要找到其他解决方案...谢谢。 - user_1357

根据我的经验，这样做是不行的。因为你给顶部添加填充不仅会降低文本的位置，还会降低带箭头的按钮的位置，该按钮用于打开选项列表。 - pupeno

如果您的选择框更大，则适用于我的方法是设置填充=盒子高度/ 5，因此我的选择框高度为35，我设置了7px的填充，这似乎解决了问题。 - Thiago Dantas

正如J.Pablo Fernández所述，填充会将箭头向下推，这对于一些人来说并不是一个可接受的选项，尤其是那些注重美学的客户。 - Agi Hammerthief

什么是 padding: auto？ - Shahriar

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文件中内置样式影响input和select元素。有关的属性是line-height:normal !important。它无法被覆盖。我已经尝试过了。我发现，如果我在Firebug中删除内置属性，就可以获得一个具有合理垂直居中文本的select元素。

- Shelly Skeens

Answer 3

我的解决方案是仅针对Firefox添加padding-top来选择目标，如下所示

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

- adam187

---

我最喜欢你的解决方案！这样填充就不会影响 Webkit 浏览器了。（虽然我还没有在 IE 上测试过） - Maurice

Answer 4

display: flex;
align-items: center;

- Victor Bredihin

Answer 5

到目前为止，这对我来说运行得很好：

line-height: 100%;

- user3403273

---

最简单的解决方案，而且有效！ - konsalex

Answer 6

我发现将行高和高度设置为相同的像素数量可以产生最一致的结果。所谓“最一致”，是指在各种浏览器中表现最优，但当然无法达到100%的“像素完美”。此外，我发现Firefox（v. 17.x）倾向于将选项文本挤压到下拉箭头的右侧；我只在OPTION元素上设置了少量的padding-right来缓解这种情况。这个设置不会影响IE 7-9的外观。

select, option {
    font-size:10px;
    height:19px;
    line-height: 19px;
    padding:0;
    margin:0;
}

option {
    padding-right:6px; /* Firefox */
}

注意-- 我的选择元素使用了较小的字体，10像素。显然你需要根据你特定的UI上下文相应地调整比例。

- code-sushi

Answer 7

我刚遇到了这个问题，主要是在移动设备上，特别是移动版Firefox。对我来说，解决方法是在选择元素上定义高度、内边距、行高和最后盒模型。这里不使用你的示例数字，但为了举例说明：

padding: 20px;
height: 60px;
line-height: 1;
-webkit-box-sizing: padding-box;
-moz-box-sizing: padding-box;
box-sizing: padding-box;

- asherrard

Answer 8

你可以给：

select{
   position:absolute;
   top:50%;
   transform: translateY(-50%);
}

为了将其作为父元素，您需要添加position:relative属性。这样就可以正常工作。

- puja

Answer 9

我尝试了以下方法，它对我有效：

select {
     line-height:normal;
     padding:3px;
} 

- Ted

Answer 10

你也可以尝试使用margin：

.select{
    margin-top: 25px;
}

- Oras