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

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

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

谢谢！

已邀请:

16 个回复

芯伶句餐绕

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

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（在此特定示例中）为标有“紧急情况下中断”的斧头。 * UPDATE *这是一篇旧文章，由于似乎人们仍然在引用此解决方案，因此我应该指出（如评论中所述），自1.9起，此功能已从jQuery中删除。请查看Modernizr项目以执行功能检测，以代替浏览器嗅探。

蹄渭信妥扳

只是有这个问题，但对于移动设备，主要是移动Firefox。对我来说，诀窍是在选择元素上定义高度，填充，线高以及最后的框大小。这里不使用示例编号，而是为了示例：

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;

陈獭

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

雄鞋谋塘

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

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。它会工作。

涸坍饺

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

要回复问题请先登录或注册

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

16 个回复

发起人

css

gwt

select

vertical_alignment

问题状态

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

与内容相关的链接

16 个回复

发起人

css

gwt

select

vertical_alignment

问题状态