我想在select框中垂直alignment文本

我想垂直alignmentselect框中的文本。 我试过使用

select{ verticle-align:middle; } 

但是它不适用于任何浏览器。 Chrome似乎将select框中的文本作为默认alignment中心。 FF将其与顶部alignment，IE将其与底部alignment。 有没有办法做到这一点？ 我在UIBinder中使用GWT的Select小部件。

这是目前我所拥有的：

 select{ height: 28px !important; border: 1px solid #ABADB3; margin: 0; padding: 0; vertical-align: middle; } 

谢谢！

Answer 1

你最好的select可能是调整顶部填充和跨浏览器比较。 这不是完美的，但我认为它是尽可能接近。

 padding-top:4px; 

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

提示：如果您的字体设置为px ，请在px中设置填充。 如果你的字体被设置为em ，那么在em中设置填充。

编辑

这些是我认为你有的选项，因为垂直alignment不是贯穿浏览器。

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.你可以把字体设置得更大一些，让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元素中的文本垂直alignment：

 select { box-sizing: content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; } 

但是，如果有的话，它甚至会把文本向下推到IE8中。 如果我将box-sizing属性设置回边框，至less不会使IE8变得更糟（而FF仍然会应用-moz-box-sizing属性）。 这将是很好的IE浏览器的解决scheme，但我不屏住呼吸。

编辑： Nix这个。 testing后不起作用。 但是对于任何感兴趣的人来说，这个问题似乎源于FF的forms.css文件中内置的风格，影响了input和select元素。 有问题的属性是行高：正常！重要 。 它不能被覆盖。 我试过了。 我发现，如果我删除Firebug中的内置属性，我会得到一个合理垂直居中文本的select元素。

Answer 3

我的解决scheme是添加填充顶部的select针对Firefox只有这样

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

Answer 4

我碰到了这个问题。 我的select选项是垂直集中在webkit中，但如果将它们默认为顶部。 环顾四周后，我并不是真的想创造一个混乱的工作，最终没有解决我的问题。

解决scheme：Javascript。

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

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

注意：除非绝对必要，否则我不build议使用js来创build任何样式。 CSS应该始终是样式的主要解决scheme – 把jQuery（在这个特定的例子中）看作标记为“Break in case of Emergency”的ax。

* 更新 *这是一个旧的职位，因为它似乎仍然引用这个解决scheme，我应该陈述（如评论中所述），自从1.9这个function已经从jQuery中删除。 请参阅Modernizr项目来执行function检测来代替浏览器嗅探 。

Answer 5

刚刚有这个问题，但对于移动设备，主要是移动的Firefox 。 对我来说，诀窍是在select元素上定义高度 ， 填充 ， 行高和最终的框尺寸 。 不要在这里使用你的例子数字，但为了一个例子：

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

Answer 6

到目前为止，这对我来说工作得很好：

 line-height: 100%; 

Answer 7

我试过如下，它为我工作：

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

Answer 8

我发现只需将线高和高度设置为相同的像素数量即可获得最一致的结果。 我所说的“最一致的”是指最佳的一致性，但当然这并不是所有浏览器都是100％“像素完美”的。 另外，我发现Firefox（v。17.x）倾向于将选项文本挤压到右侧的下拉箭头上; 我减轻了这一点，只有在OPTION元素上设置了less量的填充权。 这个设置不影响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{ 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 10

我曾经使用具有相同值的height和line-height ，但是在整个互联网中certificate是不一致的。 我目前的做法是像这样与填充混合。

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

您也可以使用padding的水平值，而不是width + text-align

Answer 11

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

为我工作的方法是进入检查员，并增量padding直到文本居中。 这也将减less下拉图标的大小，但它也将居中，所以它不是视觉上的干扰。

Answer 12

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

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

Answer 13

我知道的最近的一般解决scheme使用box-align属性，如此处所述。 工作示例在这里 （我只能在Chrome上testing它，相信对于其他浏览器也是一样的）。

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

Answer 14

我遇到了同样的问题，并且一直在努力工作好几个小时。 我终于想出了一些有用的东西。

基本上我没有尝试过在任何情况下工作，直到我定位一个div复制select框上的第一个选项的文本，并留下实际的第一个选项空白。 我用{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;}