I want to vertical-align text in select box
CssGwtSelectVertical AlignmentCss Problem Overview
I want to vertically align the text in select box. I tried using
select{
verticle-align:middle;
}
however it does not work in any browsers. Chrome seems to align the text in select box to the center as a default. FF aligns it to the top and IE aligns it to the bottom. Is there any way to achieve this? I am using GWT's Select widget in UIBinder.
This is currently what I have:
select{
height: 28px !important;
border: 1px solid #ABADB3;
margin: 0;
padding: 0;
vertical-align: middle;
}
Thanks!
Css Solutions
Solution 1 - Css
Your best option will probably be to adjust the top padding & compare across browsers. It's not perfect, but I think it's as close as you can get.
padding-top:4px;
The amount of padding you need will depend on the font size.
Tip: If your font is set in px, set padding in px as well. If your font is set in em, set the padding in em too.
EDIT
These are the options I think you have, since vertical-align isn't consistant across the browsers.
A. Remove height attribute and let the browser handle it. This usually works the best for me.
<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>
B. Add top-padding to push down the text. (Pushed down the arrow in some browsers)
<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>
C. You can make the font larger to try and match the select height a little nicer.
<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>
Solution 2 - Css
I stumbled across this set of css properties which seem to vertically align the text in sized select elements in Firefox:
select
{
box-sizing: content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
}
If anything, though, it pushes the text down even farther in IE8. If I set the box-sizing property back to border-box, it at least doesn't make IE8 any worse (and FF still applies the -moz-box-sizing property). It would be nice to find a solution for IE, but I'm not holding my breath.
Edit: Nix this. It doesn't work after testing. For anyone interested, though, the problem seems to stem from built-in styles in FF's forms.css file affecting input and select elements. The property in question is line-height:normal !important. It cannot be overridden. I've tried. I discovered that if I delete the built-in property in Firebug I get a select element with reasonably vertically-centered text.
Solution 3 - Css
My solution is to add padding-top for select targeted to firefox only like this
// firefox vertical aligment of text
@-moz-document url-prefix() {
select {
padding-top: 13px;
}
}
Solution 4 - Css
I ran into this problem exactly. My select options were vertically centered in webkit, but ff defaulted them to the top. After looking around I didn't really want to create a work around that was messy and ultimately didn't solve my problem.
Solution: Javascript.
if ($.browser.mozilla) {
$('.styledSelect select').css( "padding-top","8px" );
}
This solves your problem very precisely. The only downside here is that I'm using jQuery, and if you aren't using jQuery on your project already, you may not want to include a js library for a one-off.
Note: I don't recommend styling anything with js unless absolutely necessary. CSS should always be the primary solution for styling–think of jQuery (in this particular example) as the axe labeled "Break in case of Emergency".
UPDATE This is an old post and since it appears people are still referencing this solution I should state (as mentioned in the comments) that since 1.9 this feature has been removed from jQuery. Please see the Modernizr project to perform feature detection in lieu of browser sniffing.
Solution 5 - Css
So far this is working fine for me:
line-height: 100%;
Solution 6 - Css
display: flex;
align-items: center;
Solution 7 - Css
just had this problem, but for mobile devices, mainly mobile firefox. The trick for me was to define a height, padding, line height, and finally box sizing, all on the select element. Not using your example numbers here, but for the sake of an example:
padding: 20px;
height: 60px;
line-height: 1;
-webkit-box-sizing: padding-box;
-moz-box-sizing: padding-box;
box-sizing: padding-box;
Solution 8 - Css
I've tried as following and it worked for me:
select {
line-height:normal;
padding:3px;
}
Solution 9 - Css
I found that simply setting the line-height and height to the same pixel quantity produced the most consistent result. By "most consistent" I mean optimally consistent but of course it is not 100% "pixel-perfect" across browsers. Additionally I found that Firefox (v. 17.x) tends to crowd the option text to the right against the drop-down arrow; I alleviated this with a small amount of padding-right set on the OPTION element only. This setting does not affect appearance in IE 7-9.
My result:
select, option {
font-size:10px;
height:19px;
line-height: 19px;
padding:0;
margin:0;
}
option {
padding-right:6px; /* Firefox */
}
NOTE -- my SELECT element uses a smaller font, 10px. Obviously you will need to adjust proportions accordingly for your specific UI context.
Solution 10 - Css
you can give :
select{
position:absolute;
top:50%;
transform: translateY(-50%);
}
and to parent you have to give position:relative. it will work.
Solution 11 - Css
Try to set the "line-height" attribute
Like this:
select{
height: 28px !important;
line-height: 28px;
}
Here you are some documentation about this attribute:
Solution 12 - Css
I used to use height and line-height with the same values, but the proved to be inconsistent across the interwebs. My current approach is to mix that with padding like so.
select {
font-size:14px;
height:18px;
line-height:18px;
padding:5px 0;
width:200px;
text-align:center;
}
You could also use padding for the horizontal value instead of the width + text-align
Solution 13 - Css
I've had the same problem and been working on it for hours. I've finally come up something that works.
Basically nothing I tried worked in every situation until I positioned a div to replicate the text of the first option over the select box and left the actual first option blank. I used {pointer-events:none;} to let users click through the div.
HTML
<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;}
Solution 14 - Css
I found that only adding padding-top pushed down the grey dropdown arrow box on the right, which was undesirable.
The method that worked for me was to go into the inspector and incrementally add padding until the text was centered. This will also reduce the size of the dropdown icon, but it will be centered as well so it isn't as visually disturbing.
Solution 15 - Css
This has now been fixed in Firefox Nightly and will be in the next firefox build.
Please see this bug for more information https://bugzilla.mozilla.org/show_bug.cgi?id=610733
Solution 16 - Css
You can also try margin:
.select{
margin-top: 25px;
}
Solution 17 - Css
The nearest general solution i know uses box-align property, as described here. Working example is here (i can test it only on Chrome, believe that has equivalent for other browsers too).
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;
}