Question

我在互联网上没有找到关于如何在HTML select 中垂直对齐文字的任何解释。我不想在<option></option>中对齐文本，因为这并不难。我想对齐<select></select>。

中选定的文字

我查看了Firefox，Opera，Chrome和Internet Explorer等浏览器，默认情况下，文本在Opera和Chrome中都是正确的。在Firefox中，它将是最重要的，在Internet Explorer中它将会走向最低点。

如何在所有浏览器中以相同的方式工作？

Answer 1

我发现以下css是最简单的方法：

select{
    padding-top: 4px;
}

当然你会根据你的字体调整填充值。您也可以像这样定位它： #SomeID选择{ padding-top：4px; }

那里有更多经验丰富的偷看，但这些是我的两位： - ）

干杯

Answer 2

这是@ShawnBernard的类似答案。

但您需要做的是为表单中的select元素创建特定宽度。完成后，将text-align: center;添加到选择CSS中并为select元素配置填充。

为选项表单创建CSS，只会使实际的下拉背景更大。

没有简单的方法可以告诉你应该设置多少填充，因为这取决于你想要设置它们的高度以及字体CSS样式。

UPDATE：就像@RajivPingale所说的那样，由于特定的浏览器例程，选项表格不会被采用。因此，此功能不适用于所有浏览器。

这是我的jsFiddle：http://jsfiddle.net/abrielshipley/Y4eJm/4/

Answer 3

首先，text-align仅适用于块级元素。但即使您将display：block指定给select和option元素，文本可能不会居中。原因是浏览器使用它们用于渲染表单字段和这些例程的内置例程仅受限于CSS规则。

你可以去jQuery下拉菜单

Answer 4

是的，垂直对齐中间： - ）

示例

如果在选项中有“dog，cat，tiger”这样的文字，则第一个选项被选为“dog”但是＆lt; select＆gt;的高度。设置为34像素但字体大小为12像素，因此您看到文本将比＆lt; select＆gt;小得多。这就是为什么它将在一个浏览器中对齐到顶部而另一个在底部对齐，而另一个浏览器将在中间对齐。我希望文本在所有浏览器的垂直中间对齐。

以下是显示问题的简单代码

<html> <body> <style> .select{ height:34px; font-size:12px; } </style> <select class="select"> <option>dog</option> <option>cat</option> <option>tiger</option> </select> </body> </html>

Answer 5

我遇到的唯一可以在Firefox（FF 11）的<select>标记中垂直对齐文字的解决方案是使用填充：

select.yourclass
{
    font-size: 1.1em; /* Size of the text */

height: 41px; /* The height you want the <select> to be */
padding-top: 7px; /* how far from the top you want the text to appear */
}

在上面的代码中，您需要手动计算相关值（或者可能是服务器端或JS）。

这个解决方案唯一的缺点是，在Firefox中，控件中的下拉箭头也会向下移动padding-top的值，所以它绝不是完美的。

Answer 6

你必须使用标签来对齐小提琴：http://jsfiddle.net/E7mxq/2/

如何在HTML中垂直对齐文本到中间？

6 个答案: