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

Posted 2021-05-05

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

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>

另一答案

我以前使用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的更多信息，请参阅此bug

另一答案

你可以给：

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

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

另一答案

display: flex;
align-items: center;

另一答案

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

另一答案

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

另一答案

我的解决方案是添加padding-top为select目标到firefox只是这样

// 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元素上定义高度，填充，行高，最后是框大小。这里没有使用您的示例数字，但为了示例：

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.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上下文相应地调整比例。

另一答案

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