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

Question

I didn't find any explanation on the internet on how to vertical-align text in an HTML select . 我没有在互联网上找到关于如何在HTML 选择中垂直对齐文本的任何解释。 I don't want to align the text in the <option></option> because that is not hard. 我不想在<option></option>对齐文本，因为这并不难。 I want to align the text that is selected in the <select></select> . 我想对齐<select></select>的文本。

I've looked at browsers like Firefox, Opera, Chrome and Internet Explorer and the text is only correct centered by default in Opera and Chrome. 我查看了Firefox，Opera，Chrome和Internet Explorer等浏览器，默认情况下，文本只能在Opera和Chrome中正确居中。 In Firefox it is going to top, in Internet Explorer it is going to bottom. 在Firefox中，它将是最重要的，在Internet Explorer中它将走向最低点。

How can this be made to work the same way in all browsers? 如何在所有浏览器中以相同的方式工作？

Answer 1

I found the following css as the easiest way: 我发现以下css是最简单的方法：

select{
    padding-top: 4px;
}

ofcourse you would adjust the padding value as per your font. 当然你会根据你的字体调整填充值。 You can also target it like so: #SomeID select{ padding-top: 4px; 您也可以像这样定位它：#SomeID select {padding-top：4px; } }

There are more experienced peeps out there, but these are my two bits :-) 那里有更多经验丰富的偷看，但这些是我的两位:-)

Cheers 干杯

Answer 2

It's a similar answer to @ShawnBernard. 这是@ShawnBernard的类似答案。

But what you need to do is create a specific width for the select element in the form. 但您需要做的是为表单中的select元素创建特定宽度。 Once you do that, then add the text-align: center; 一旦你这样做，然后添加text-align: center; into the select CSS and configure padding for the select element. 进入select CSS并为select元素配置填充。

What creating CSS for the option form, that only makes the actual drop-down background bigger. 为选项表单创建CSS的原因是，只会使实际的下拉背景更大。

There's no easy way to tell you how much padding you should set it at because that will depend on the height you want to set them at as well as the font CSS styles. 没有简单的方法可以告诉你应该设置多少填充，因为这取决于你想要设置它们的高度以及字体CSS样式。

UPDATE: Like @RajivPingale said, the options form isn't going to take because of specific browser routines. 更新：像@RajivPingale所说，由于特定的浏览器例程，选项表格不会采用。 So, this capability won't work with all browsers. 因此，此功能不适用于所有浏览器。

Here's my jsFiddle : http://jsfiddle.net/abrielshipley/Y4eJm/4/ 这是我的jsFiddle ： http ： //jsfiddle.net/abrielshipley/Y4eJm/4/

Answer 3

For one thing, text-align applies to block level elements only. 首先，text-align仅适用于块级元素。 But even if you assign display: block to the select and option elements, the texts probably won't be centered. 但即使您将display：block指定给select和option元素，文本也可能不会居中。 The reason is that browsers use their built-in routines for rendering form fields, and these routines are affected by CSS rules to a limited extent only. 原因是浏览器使用其内置例程来呈现表单字段，这些例程仅受限于CSS规则。

you can go for jQuery dropdown menus 你可以去jQuery下拉菜单

Answer 4

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

Answer 5

Yes, vertically align middle :-) 是的，垂直对齐中间:-)

Example 例

If there were text like "dog, cat, tiger" in option and the first option is selected "dog" but the height of the <select> is set 34 pixels but the font-size is like 12 pixels so you see the text will be much smaller than the <select> and that's why it will be aligned in one browser to the top and in another at the bottom and in yet another it will be aligned in the middle. 如果选项中有“dog，cat，tiger”这样的文字，第一个选项被选为“dog”，但<select>的高度设置为34像素，但字体大小为12像素，所以你看到文字会比<select>小得多，这就是为什么它将在一个浏览器中对齐到顶部而另一个在底部对齐，而另一个浏览器将在中间对齐。 I want the text to be aligned in the vertical middle in all browsers. 我希望文本在所有浏览器的垂直中间对齐。

Here is simple code that is showing the problem 这是显示问题的简单代码

<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

The only solution I have come across that can vertically align text in a <select> tag in Firefox (FF 11) is to use padding: 我遇到的唯一可以在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 */
}

In the code above, you need to manually calculate the relevant values (or perhaps server-side or JS). 在上面的代码中，您需要手动计算相关值（或者可能是服务器端或JS）。

The only downside to this solution is that it seems that in Firefox the drop-down arrow in the control is also shifted down by the value of padding-top so it is by no means perfect. 这个解决方案唯一的缺点是，似乎在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