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中设置填充。

修改

这些是我认为您拥有的选项，因为纵向对齐在浏览器中并不一致。

一个。删除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中。添加top-padding以下推文本。（在某些浏览器中按下箭头）

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

℃。您可以将字体设置得更大，以便更好地匹配选择高度。

<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中的内置属性，我会得到一个具有合理垂直居中文本的select元素。

Answer 3

我的解决方案是为这个

添加padding-top for select target to firefox

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

Answer 4

我完全遇到了这个问题。我的选择选项在webkit中垂直居中，但是ff默认为顶部。环顾四周之后，我真的不想创造一个凌乱的工作，最终没有解决我的问题。

解决方案：Javascript。

if ($.browser.mozilla) {
            $('.styledSelect select').css( "padding-top","8px" );
        }

这非常准确地解决了您的问题。这里唯一的缺点是我正在使用jQuery，如果你没有在你的项目中使用jQuery，你可能不希望为一次性包含一个js库。

注意：除非绝对必要，否则我不建议使用js设置任何样式。 CSS应始终是样式的主要解决方案 - 将jQuery（在此特定示例中）视为标记为“在紧急情况下中断”的斧头。

* 更新 * 这是一篇旧帖子，因为看起来人们仍在引用此解决方案，我应该说明（如评论中所述）自1.9以来这个功能已从jQuery中删除。请参阅Modernizr项目以执行功能检测，以代替浏览器嗅探。

Answer 5

到目前为止，这对我来说还不错：

line-height: 100%;

Answer 6

刚出现这个问题，但对于移动设备，主要是移动版Firefox 。我的诀窍是定义高度，填充，行高，最后框大小调整，全部开启选择元素。这里没有使用您的示例数字，但为了示例：

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

Answer 7

我尝试过如下操作，它对我有用：

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

Answer 8

我发现只需将行高和高度设置为相同的像素数就可以得到最一致的结果。 “最一致”我的意思是最佳一致，但当然它不是100％在浏览器中“像素完美”。另外我发现Firefox（v.17x）倾向于将选项文本挤在右下方的箭头上;我通过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 9

您也可以尝试保证金：

.select{
    margin-top: 25px;
}

Answer 10

display: flex;
align-items: center;

Answer 11

你可以给：

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

对于父母，你必须给出位置：亲属。它会起作用。

Answer 12

现在已经在Firefox Nightly中修复了这个问题，并且将在下一个firefox版本中修复。

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

Answer 13

我发现只添加padding-top按下了右边的灰色下拉箭头框，这是不可取的。

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

Answer 14

我遇到了同样的问题并且已经工作了好几个小时。我终于找到了有效的东西。

基本上我没有试过在每种情况下工作，直到我找到一个div来复制第一个选项的文本而不是选择框并将实际的第一个选项留空。我使用{pointer-events：none;}让用户点击div。

HTML

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

CSS

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

Answer 15

我过去常常使用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 16

尝试设置“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 17

我所知道的最近的通用解决方案使用了box-align属性，如here所述。工作示例是here（我只能在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;
}

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

17 个答案: