CSS 我想在选择框中垂直对齐文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5439782/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
I want to vertical-align text in select box
提问by datauser
I want to vertically align the text in select box. I tried using
我想垂直对齐选择框中的文本。我尝试使用
select{
verticle-align:middle;
}
however it does not work in any browsers. Chrome seems to align the text in select box to the center as a default. FF aligns it to the top and IE aligns it to the bottom. Is there any way to achieve this? I am using GWT's Select widget in UIBinder.
但是它在任何浏览器中都不起作用。Chrome 似乎默认将选择框中的文本与中心对齐。FF 将其与顶部对齐，而 IE 将其与底部对齐。有没有办法实现这一目标？我在 UIBinder 中使用 GWT 的 Select 小部件。
This is currently what I have:
这是目前我所拥有的：
select{
height: 28px !important;
border: 1px solid #ABADB3;
margin: 0;
padding: 0;
vertical-align: middle;
}
Thanks!
谢谢！
采纳答案by user401183
Your best option will probably be to adjust the top padding & compare across browsers. It's not perfect, but I think it's as close as you can get.
您最好的选择可能是调整顶部填充并在浏览器之间进行比较。它并不完美，但我认为它尽可能接近。
padding-top:4px;
The amount of padding you need will depend on the font size.
您需要的填充量取决于字体大小。
Tip: If your font is set in px, set padding in pxas well. If your font is set in em, set the padding in emtoo.
提示：如果您的字体设置在 中px，请同时设置内边距px。如果您的字体设置在 中em，也请设置内边距em。
EDIT
编辑
These are the options I think you have, since vertical-align isn't consistant across the browsers.
这些是我认为您拥有的选项，因为 vertical-align 跨浏览器不一致。
A. Remove height attribute and let the browser handle it. This usually works the best for me.
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. Add top-padding to push down the text. (Pushed down the arrow in some browsers)
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. You can make the font larger to try and match the select height a little nicer.
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>
回答by Shelly Skeens
I stumbled across this set of css properties which seem to vertically align the text in sized select elements in Firefox:
我偶然发现了这组 css 属性，它们似乎在 Firefox 中垂直对齐大小选择元素中的文本：
select
{
box-sizing: content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
}
If anything, though, it pushes the text down even farther in IE8. If I set the box-sizing property back to border-box, it at least doesn't make IE8 any worse (and FF still applies the -moz-box-sizing property). It would be nice to find a solution for IE, but I'm not holding my breath.
但是，如果有的话，它会在 IE8 中将文本向下推得更远。如果我将 box-sizing 属性设置回 border-box，它至少不会使 IE8 变得更糟（并且 FF 仍然应用 -moz-box-sizing 属性）。为 IE 找到解决方案会很好，但我并没有屏住呼吸。
Edit:Nix this. It doesn't work after testing. For anyone interested, though, the problem seems to stem from built-in styles in FF's forms.css file affecting input and select elements. The property in question is line-height:normal !important. It cannot be overridden. I've tried. I discovered that if I delete the built-in property in Firebug I get a select element with reasonably vertically-centered text.
编辑：Nix 这个。经测试无效。不过，对于任何感兴趣的人来说，这个问题似乎源于 FF 的 forms.css 文件中影响输入和选择元素的内置样式。有问题的属性是line-height:normal !important。它不能被覆盖。我试过了。我发现如果我删除 Firebug 中的内置属性，我会得到一个带有合理垂直居中文本的 select 元素。
回答by adam187
My solution is to add padding-top for select targeted to firefox only like this
我的解决方案是为仅针对 Firefox 的 select 添加 padding-top 像这样
// firefox vertical aligment of text
@-moz-document url-prefix() {
select {
padding-top: 13px;
}
}
回答by Scott Sword
I ran into this problem exactly. My select options were vertically centered in webkit, but ff defaulted them to the top. After looking around I didn't really want to create a work around that was messy and ultimately didn't solve my problem.
我正好遇到了这个问题。我的选择选项在 webkit 中垂直居中，但 ff 默认它们在顶部。环顾四周后，我真的不想创建一个混乱的解决方案，最终没有解决我的问题。
Solution: Javascript.
解决方案：Javascript。
if ($.browser.mozilla) {
$('.styledSelect select').css( "padding-top","8px" );
}
This solves your problem very precisely. The only downside here is that I'm using jQuery, and if you aren't using jQuery on your project already, you may not want to include a js library for a one-off.
这可以非常精确地解决您的问题。这里唯一的缺点是我使用的是 jQuery，如果您还没有在您的项目中使用 jQuery，您可能不想一次性包含一个 js 库。
Note: I don't recommend styling anything with js unless absolutely necessary. CSS should always be the primary solution for styling–think of jQuery (in this particular example) as the axe labeled "Break in case of Emergency".
注意：除非绝对必要，否则我不建议使用 js 设置任何样式。CSS 应该始终是样式的主要解决方案——将 jQuery（在这个特定示例中）视为标记为“紧急情况下中断”的斧头。
*UPDATE*This is an old post and since it appears people are still referencing this solution I should state (as mentioned in the comments) that since 1.9 this feature has been removed from jQuery. Please see the Modernizrproject to perform feature detectionin lieu of browser sniffing.
*更新*这是一篇旧帖子，由于人们似乎仍在引用此解决方案，因此我应该声明（如评论中所述）自 1.9 以来，此功能已从 jQuery 中删除。请参阅Modernizr项目以执行特征检测来代替浏览器嗅探。
回答by asherrard
just had this problem, but for mobile devices, mainly mobile firefox. The trick for me was to define a height, padding, line height, and finally box sizing, all on the select element. Not using your example numbers here, but for the sake of an example:
刚刚有这个问题，但对于移动设备，主要是移动 firefox。我的诀窍是在 select 元素上定义height、padding、line height，最后是box sizing。在这里不使用您的示例数字，而是为了一个示例：
padding: 20px;
height: 60px;
line-height: 1;
-webkit-box-sizing: padding-box;
-moz-box-sizing: padding-box;
box-sizing: padding-box;
回答by user3403273
So far this is working fine for me:
到目前为止，这对我来说很好用：
line-height: 100%;
回答by Victor Bredihin
display: flex;
align-items: center;
回答by code-sushi
I found that simply setting the line-height and height to the same pixel quantity produced the most consistent result. By "most consistent" I mean optimally consistent but of course it is not 100% "pixel-perfect" across browsers. Additionally I found that Firefox (v. 17.x) tends to crowd the option text to the right against the drop-down arrow; I alleviated this with a small amount of padding-right set on the OPTION element only. This setting does not affect appearance in IE 7-9.
我发现简单地将 line-height 和 height 设置为相同的像素数量会产生最一致的结果。“最一致”是指最佳一致，但当然它不是 100% 跨浏览器“像素完美”。此外，我发现 Firefox (v. 17.x) 倾向于将选项文本挤在右边的下拉箭头旁边；我只在 OPTION 元素上设置了少量的 padding-right 来缓解这个问题。此设置不会影响 IE 7-9 中的外观。
My result:
我的结果：
select, option {
font-size:10px;
height:19px;
line-height: 19px;
padding:0;
margin:0;
}
option {
padding-right:6px; /* Firefox */
}
NOTE -- my SELECT element uses a smaller font, 10px. Obviously you will need to adjust proportions accordingly for your specific UI context.
注意——我的 SELECT 元素使用较小的字体，10px。显然，您需要针对您的特定 UI 上下文相应地调整比例。
回答by Ted
I've tried as following and it worked for me:
我试过如下，它对我有用：
select {
line-height:normal;
padding:3px;
}
回答by AndreaRivadossi
Try to set the "line-height" attribute
尝试设置“line-height”属性
Like this:
像这样：
select{
height: 28px !important;
line-height: 28px;
}
Here you are some documentation about this attribute:
这是有关此属性的一些文档：
http://www.w3.org/wiki/CSS/Properties/line-height
http://www.w3.org/wiki/CSS/Properties/line-height
