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

Question

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

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

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

Answer 1

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

select{
    padding-top: 4px;
}

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

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

干杯

Answer 2

这是@ShawnBernard的类似答案。

但您需要做的是为表单中的select元素创建特定宽度。 一旦你这样做，然后添加text-align: center; 进入select CSS并为select元素配置填充。

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

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

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

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

Answer 3

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

你可以去jQuery下拉菜单

Answer 4

你将不得不使用标签对齐heres小提琴： http ： //jsfiddle.net/E7mxq/2/

Answer 5

是的，垂直对齐中间:-)

例

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

这是显示问题的简单代码

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

我遇到的唯一可以在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的值，所以它绝不是完美的。

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

问题描述

6 个解决方案

解决方案1
2 2013-04-05 13:18:09

解决方案2
1 2012-12-05 08:09:28

解决方案3
1 2012-12-05 08:30:19

解决方案4
0 2012-06-06 20:18:26

解决方案5
0 2010-11-26 08:14:46

解决方案6
0 2012-03-03 08:44:59

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

问题描述

6 个解决方案

解决方案1 2 2013-04-05 13:18:09

解决方案2 1 2012-12-05 08:09:28

解决方案3 1 2012-12-05 08:30:19

解决方案4 0 2012-06-06 20:18:26

解决方案5 0 2010-11-26 08:14:46

解决方案6 0 2012-03-03 08:44:59

解决方案1
2 2013-04-05 13:18:09

解决方案2
1 2012-12-05 08:09:28

解决方案3
1 2012-12-05 08:30:19

解决方案4
0 2012-06-06 20:18:26

解决方案5
0 2010-11-26 08:14:46

解决方案6
0 2012-03-03 08:44:59