我想在选择框中垂直对齐文本
Posted
技术标签:
【中文标题】我想在选择框中垂直对齐文本【英文标题】：I want to vertical-align text in select box 【发布时间】：2011-07-23 07:48:16 【问题描述】：我想垂直对齐选择框中的文本。我尝试使用
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;
谢谢！
【问题讨论】：
font-size:22px; 是一个选项吗？
我已经将字体大小设置为 14px。我认为这不适用于整个浏览器...
你的第一个例子显示的是“verticle-align”而不是“vertical-align”——这些错别字肯定会给你带来麻烦。
2016 年仍然是个问题！
【参考方案1】：
你也可以试试margin：
.select
margin-top: 25px;
【讨论】：
【参考方案2】：display: flex;
align-items: center;
【讨论】：
【参考方案3】：你可以给：
select
position:absolute;
top:50%;
transform: translateY(-50%);
对于父母，您必须给出位置：相对。 它会起作用的。
【讨论】：
【参考方案4】：此问题现已在 Firefox Nightly 中得到修复，并将在下一个 Firefox 版本中。
请查看此错误以获取更多信息https://bugzilla.mozilla.org/show_bug.cgi?id=610733
【讨论】：
【参考方案5】：到目前为止，这对我来说效果很好：
line-height: 100%;
【讨论】：
最简单的解决方案和工作！【参考方案6】：刚遇到这个问题，但是对于移动设备，主要是mobile firefox。对我来说，诀窍是定义 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;
【讨论】：
【参考方案7】：我的解决方案是为仅针对 firefox 的 select 添加 padding-top
// firefox vertical aligment of text
@-moz-document url-prefix()
select
padding-top: 13px;
【讨论】：
我最喜欢您的解决方案！这样填充不会弄乱 webkit 浏览器。 （我还没有在 IE 上测试过）【参考方案8】：我正好遇到了这个问题。我的选择选项在 webkit 中垂直居中，但 ff 将它们默认为顶部。环顾四周后，我真的不想创造一个混乱的工作，最终没有解决我的问题。
解决方案：javascript。
if ($.browser.mozilla)
$('.styledSelect select').css( "padding-top","8px" );
这非常精确地解决了您的问题。这里唯一的缺点是我使用的是 jQuery，如果你还没有在你的项目中使用 jQuery，你可能不想一次性包含一个 js 库。
注意：除非绝对必要，否则我不建议使用 js 设置任何样式。 CSS 应该始终是样式设置的主要解决方案——将 jQuery（在此特定示例中）视为标有“紧急情况下中断”的斧头。
*更新* 这是一篇旧帖子，因为看起来人们仍在引用此解决方案，我应该声明（如 cmets 中所述）自 1.9 以来此功能已从 jQuery 中删除。请参阅Modernizr 项目以执行特征检测来代替浏览器嗅探。
【讨论】：
我喜欢人们投了反对票，但没有提供解决方案。如果有更好的我会很乐意考虑。 我在几天前无缘无故被否决了......在上面的回复中，已经有将近一年半的时间了，并进行了编辑以澄清问题发生的原因为什么 （至少在当时最新的 Firefox 版本中）。有人只是在玩游戏。 我没有投反对票，但是您回答了一个使用 jquery 的解决方案的问题，而该问题显然使用了另一个库； GWT，仅出于此目的添加 jquery 不是解决方案，它应该至少使用 GWT 作为解决方案。所以你的答案不是那么有用。这也没有帮助，因为您没有解释您的解决方案，因此可能不知道 jquery 的人不理解它，并且在将解决方案转换为他们自己的上下文时会遇到麻烦。 @HilbrandBouwkamp 我理解你的意思，但我的目的不是为 OP 提供答案，因为在我写这篇文章时它已经解决了。我为像我这样正在梳理 SO 以解决这个问题的人提供了这个答案。虽然我的回答没有使用 GWT，但它确实为可能遇到类似但不确切问题的人提供了替代解决方案。 RE：“没有解释你的解决方案”。 IMO sn-p 无需解释，因为它极具表现力。如果有人不理解 $ 或 .css，他们应该参考 jQuery API 文档，在那里可以详细解释。$.browser 自 jQuery 1.3 起已弃用，自 1.9 起已删除。【参考方案9】：
我发现只添加padding-top 会按下右侧的灰色下拉箭头框，这是不可取的。
对我有用的方法是进入检查器并逐渐添加 padding 直到文本居中。这也会减小下拉图标的大小，但它也会居中，因此不会造成视觉上的干扰。
【讨论】：
【参考方案10】：我发现简单地将 line-height 和 height 设置为相同的像素数量会产生最一致的结果。 “最一致”是指最佳一致，但当然它不是 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 元素使用较小的字体，10 像素。显然，您需要针对您的特定 UI 上下文相应地调整比例。
【讨论】：
【参考方案11】：我也遇到了同样的问题，并且已经解决了好几个小时。我终于想出了一些有用的东西。
在我放置一个 div 以在选择框上复制第一个选项的文本并将实际的第一个选项留空之前，我基本上没有尝试在每种情况下都起作用。我使用 pointer-events:none; 让用户点击 div。
<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-selectposition:absolute; left:28px; top:10px; z-index:1; display:block; pointer-events:none;
【讨论】：
Internet Explorer（所有版本）不支持指针事件，因此我建议不要使用此解决方案。【参考方案12】：您最好的选择可能是调整顶部填充并跨浏览器进行比较。它并不完美，但我认为它已经尽可能接近了。
padding-top:4px;
您需要的填充量取决于字体大小。
提示：如果您的字体设置在 px 中，请同时在 px 中设置填充。如果您的字体设置在 em 中，请在 em 中设置填充。
编辑
这些是我认为你有的选项，因为垂直对齐在浏览器中不一致。
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.您可以将字体变大以尝试与选择的高度匹配更好。
<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>
【讨论】：
感谢您提供的清晰示例。我尝试了选项 2，它在选择的文本框部分添加了填充，因此用于放大列表的箭头按钮保持不变......增加字体大小不是一个选项，所以我需要找到其他解决方案..谢谢。 根据我的经验，这是行不通的，因为将您添加到顶部不仅会降低文本，还会降低带有打开选项列表的箭头的按钮。 如果你的选择框更大，对我有用的是设置 padding=box height/5，所以我的选择框有 35 的高度，我设置了 7px 的填充，这似乎解决了它 正如 J.Pablo Fernández 所说，填充会将箭头向下推，这对于某些人来说是不可接受的选择，尤其是注重美学的客户。padding: auto 是什么？【参考方案13】：
我曾经使用相同的值使用height 和line-height，但事实证明跨网络不一致。我目前的方法是将它与这样的填充混合。
select
font-size:14px;
height:18px;
line-height:18px;
padding:5px 0;
width:200px;
text-align:center;
您也可以使用padding 代替width + text-align 的水平值
【讨论】：
【参考方案14】：我知道的最接近的通用解决方案使用 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;
【讨论】：
【参考方案15】：尝试设置“line-height”属性
像这样：
select
height: 28px !important;
line-height: 28px;
这里有一些关于这个属性的文档：
http://www.w3.org/wiki/CSS/Properties/line-height
http://www.w3schools.com/cs-s-ref/pr_dim_line-height.asp
【讨论】：
Line-height 不适用于选择元素，并且设置高度不会垂直居中 ie8 上的文本。【参考方案16】：我尝试了以下方法，它对我有用：
select
line-height:normal;
padding:3px;
【讨论】：
【参考方案17】：我偶然发现了这组 css 属性，它们似乎在 Firefox 中垂直对齐大小选择元素中的文本：
select
box-sizing: content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
不过，如果有的话，它会在 IE8 中将文本向下推得更远。如果我将 box-sizing 属性设置回边框框，它至少不会使 IE8 变得更糟（并且 FF 仍然应用 -moz-box-sizing 属性）。为 IE 找到解决方案会很好，但我没有屏住呼吸。
编辑： 改掉这个。测试后不起作用。但是，对于任何感兴趣的人来说，问题似乎源于 FF 的 forms.css 文件中的内置样式影响输入和选择元素。有问题的属性是 line-height:normal !important。它不能被覆盖。我试过了。我发现如果我删除 Firebug 中的内置属性，我会得到一个带有合理垂直居中文本的选择元素。
【讨论】：
以上是关于我想在选择框中垂直对齐文本的主要内容，如果未能解决你的问题，请参考以下文章