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

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

谢谢！

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>

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 文件中影响输入和选择元素的内置样式。相关属性是 line-height:normal !important。它不能被覆盖。我试过了。我发现如果我删除 Firebug 中的内置属性，我会得到一个具有合理垂直居中文本的选择元素。

Answer 3

我的解决方案是仅像这样为针对 Firefox 的选择添加 padding-top

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

Answer 4

到目前为止，这对我来说效果很好：

line-height: 100%;

Answer 5

display: flex;
align-items: center;

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 */
}

注意——我的 SELECT 元素使用较小的字体，10px。显然，您需要根据您的特定 UI 上下文相应地调整比例。

Answer 7

刚刚遇到这个问题，但是对于移动设备，主要是mobile firefox。对我来说，诀窍是定义高度、填充、行高，最后是盒子大小，全部都在选择元素。此处不使用您的示例数字，而是为了举例：

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

Answer 8

我尝试过以下方法，它对我有用：

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

Answer 9

您可以给出 : ，

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

并且对于父级，您必须给出position:relative 。
它会起作用的。

Answer 10

尝试设置“line-height”属性

，如下所示：

select{
    height: 28px !important;
    line-height: 28px;
}

这里有一些有关此属性的文档：

http://www.w3.org/wiki/CSS/Properties/line-height

http://www.w3schools.com/cssref/pr_dim_line-height.asp

Answer 11

我曾经使用具有相同值的 height 和 line-height ，但事实证明它们在互联网上不一致。我目前的方法是将其与填充混合起来，如下所示。

select {
  font-size:14px;
  height:18px;
  line-height:18px;
  padding:5px 0;
  width:200px;
  text-align:center;
}

您还可以使用 padding 作为水平值，而不是 width + text-align

Answer 12

我也遇到了同样的问题，并花了几个小时来解决它。我终于想出了一些有用的东西。

基本上，我尝试过的任何方法都适用于所有情况，直到我放置一个 div 来复制选择框上第一个选项的文本并将实际的第一个选项留空。我使用 {pointer-events:none;} 让用户点击 div。

HTMLCSS

    <div class='custom-select-container'>
      <select>
        <option></option>
        <option>option 1</option>
        <option>option 2</option>
      </select>
      <div class='custom-select'>
        Select an option
      </div>
    <div>

​

.custom-select{position:absolute; left:28px; top:10px; z-index:1; display:block; pointer-events:none;}

Answer 13

我发现只添加 padding-top 就会把右侧的灰色下拉箭头框压下去，这是不可取的。

对我有用的方法是进入检查器并逐渐添加 padding 直到文本居中。这也会减小下拉图标的大小，但它也会居中，因此不会在视觉上造成干扰。

Answer 14

该问题现已在 Firefox Nightly 中得到修复，并将在下一个 Firefox 版本中修复。

请参阅此错误以获取更多信息 https://bugzilla.mozilla.org/show_bug.cgi? id=610733

Answer 15

您还可以尝试保证金：

.select{
    margin-top: 25px;
}

Answer 16

我知道的最接近的通用解决方案使用 box-align 属性，如此处所述。
工作示例是这里（我只能在Chrome上测试它，相信其他浏览器也有等效的）。

CSS：

select{
  display:-webkit-box;
  display:-moz-box;
  display:box;
  height: 30px;;
}
select:nth-child(1){
  -webkit-box-align:start;
  -moz-box-align:start;
  box-align:start;
}
select:nth-child(2){
  -webkit-box-align:center;
  -moz-box-align:center;
  box-align:center;
}
select:nth-child(3){
  -webkit-box-align:end;
  -moz-box-align:end;
  box-align:end;
}