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

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

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

谢谢！

最好的选择可能是调整顶部填充并在浏览器之间进行比较。它并不完美，但我认为它离您可能的距离很近。

padding-top:4px;

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

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

编辑

这些是我认为您可以使用的选项，因为垂直对齐方式在浏览器中不一致。

A.删除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.添加顶部填充以向下推文本。（在某些浏览器中按下箭头）

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

我偶然发现了这组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元素。

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

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

我恰好遇到了这个问题。我的选择选项在webkit中垂直居中，但ff默认将它们置于顶部。环顾四周后，我真的不想创建一个凌乱的工作，最终并没有解决我的问题。

解决方案：Javascript。

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

这可以非常精确地解决您的问题。唯一的缺点是我正在使用jQuery，并且如果您尚未在项目中使用jQuery，则可能不希望一次性包含js库。

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

*更新*这是一篇旧文章，由于似乎人们仍在引用此解决方案，因此我应该指出（如评论中所述），自1.9起，此功能已从jQuery中删除。请参阅Modernizr项目以执行功能检测以代替浏览器嗅探。

只是有这个问题，但对于移动设备，主要是移动Firefox。我的诀窍是在select元素上定义height，padding，line height以及最后的框大小。这里不使用示例编号，而是为了示例：

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

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

line-height: 100%;

我尝试了以下方法，它为我工作：

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

我发现仅将行高和行高设置为相同的像素数量就可以得到最一致的结果。“最一致”是指最佳一致，但是在所有浏览器中当然不是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上下文相应地调整比例。

display: flex;
align-items: center;

尝试设置“行高”属性

像这样：

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

我曾经使用height和line-height具有相同的值，但是事实证明在整个网络中不一致。我当前的方法是像这样将其与填充混合。

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

您也可以使用padding水平值代替width+text-align

我遇到了同样的问题，并且已经研究了几个小时。我终于想出了一些可行的方法。

基本上，在将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;}

我发现只有添加会padding-top按下右侧的灰色下拉箭头框，这是不希望的。

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

现在，此问题已在Firefox Nightly中修复，并将在下一个firefox构建中使用。

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

你可以给：

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

对于父母，您必须给出position：relative。它会工作。

最近通用的解决方案，我知道使用盒-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;
}