How to vertically align text to middle in HTML select?
Question
I didn't find any explanation on the internet on how to vertical-align text in an HTML select . I don't want to align the text in the <option></option> because that is not hard. I want to align the text that is selected in the <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. In Firefox it is going to top, in Internet Explorer it is going to bottom.
How can this be made to work the same way in all browsers?
6 answers
solution1
2 2013-04-05 13:18:09
I found the following css as the easiest way:
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; }
There are more experienced peeps out there, but these are my two bits :-)
Cheers
solution2
1 2012-12-05 08:09:28
It's a similar answer to @ShawnBernard.
But what you need to do is create a specific width for the select element in the form. Once you do that, then add the text-align: center; into the select CSS and configure padding for the select element.
What creating CSS for the option form, that only makes the actual drop-down background bigger.
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.
UPDATE: Like @RajivPingale said, the options form isn't going to take because of specific browser routines. So, this capability won't work with all browsers.
Here's my jsFiddle : http://jsfiddle.net/abrielshipley/Y4eJm/4/
solution3
1 2012-12-05 08:30:19
For one thing, text-align applies to block level elements only. But even if you assign display: block to the select and option elements, the texts probably won't be centered. 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.
you can go for jQuery dropdown menus
solution4
0 2012-06-06 20:18:26
你将不得不使用标签对齐heres小提琴： http ： //jsfiddle.net/E7mxq/2/
solution5
0 2010-11-26 08:14:46
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. 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>
solution6
0 2012-03-03 08:44:59
The only solution I have come across that can vertically align text in a <select> tag in Firefox (FF 11) is to use padding:
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).
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.