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

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

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

谢谢！

139522 次浏览
小开
最佳答案

您最好的选择可能是调整顶部填充和跨浏览器比较。虽然不完美，但我觉得已经很接近了。

padding-top:4px;

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

提示: 如果您的字体设置在 px，设置填充在 px以及。如果在 em中设置了字体，那么也在 em中设置填充。

剪辑

这些是我认为你有的选项，因为纵向对齐在浏览器中并不一致。

删除高度属性，让浏览器处理它。这通常是最适合我的。

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

添加顶部填充按下文本。(在一些浏览器中按下箭头)

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

你可以把字体放大一些，试着把选择的高度匹配得更好一些。

<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 元素的文本:

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

不过，如果说有什么不同的话，那就是它在 IE8中将文本向下推得更远。如果我将 box-size 属性设置回 orders-box，它至少不会使 IE8变得更糟(而且 FF 仍然应用-moz-box-size 属性)。如果能为 IE 找到一个解决方案就太好了，但是我并没有屏住呼吸。

编辑: Nix this。测试后不起作用。不过，对于感兴趣的人来说，问题似乎源于 FF 的 forms.css 文件中影响输入和选择元素的内置样式。问题中的属性是 线高: 正常! 重要。无法被覆盖。我试过了。我发现，如果删除 Firebug 中的内置属性，就会得到一个具有合理的垂直居中文本的 select 元素。

小开

我试过以下方法，它对我很有效:

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

我正好遇到了这个问题。我的选择选项在 webkit 中垂直居中，但 ff 将它们默认设置为顶部。环顾四周后，我真的不想创建一个工作周围是混乱的，最终没有解决我的问题。

解决方案: Javascript。

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

这正好解决了你的问题。这里唯一的缺点是我使用的是 jQuery，如果您还没有在项目中使用 jQuery，那么您可能不希望一次性地包含一个 js 库。

注意: 我不推荐使用 js 设计任何东西，除非绝对必要。CSS 应该始终是样式化的主要解决方案——想想 jQuery (在这个特殊的例子中)就像标记为“在紧急情况下中断”的斧子。

* < em > 更新 * 这是一篇老文章，因为人们似乎仍然在引用这个解决方案，我应该声明(正如在评论中提到的) ，自1.9以来，这个特性已经从 jQuery 中删除。请参阅 现代化项目执行 特征提取代替 浏览器嗅探。

小开

我发现简单地将行高度和高度设置为相同的像素数量可以产生最一致的结果。我所说的“最一致”是指最佳一致性，但是当然不是所有浏览器都100% “像素完美”。此外，我发现 Firefox (v. 17.x)倾向于将选项文本放在右边，而不是下拉箭头; 我只在 OPTION 元素上设置了少量的右边填充来缓解这种情况。此设置不影响 IE7-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

小开

我所知道的最近的通用解决方案使用框对齐属性，如 给你所述。 工作示例是 给你(我只能在 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;
}
小开

我过去使用 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 放置在选择框上复制第一个选项的文本，并将实际的第一个选项保留为空白。我使用{指针事件: 无; }让用户通过 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-select{position:absolute; left:28px; top:10px; z-index:1; display:block; pointer-events:none;}
小开

我发现只添加 padding-top就会向下推动右边的灰色下拉箭头框，这是不受欢迎的。

对我有效的方法是进入检查器并逐步添加 padding，直到文本居中。这也将减少下拉图标的大小，但它也将居中，所以它不是视觉干扰。

小开

我的解决方案是像这样为仅针对 Firefox 的 select 添加填充顶部

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

只有这个问题，但对于移动设备，主要是 移动火狐(mobile 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%;
小开

这个问题现在已经在 Firefox 每晚版本中得到解决，并将在下一个 Firefox 版本中得到解决。

有关更多信息，请参见此错误

小开

你可以给予:

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

而对于父母，你必须给予地位: 亲属。 会成功的。

小开 
display: flex;
align-items: center;
小开

你也可以试试保证金:

.select{
margin-top: 25px;
}

提交答案