I want to vertical-align text in select box

Question

I want to vertically align the text in select box. I tried using

select{
   verticle-align:middle;
}

however it does not work in any brows

Answer 1

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.

Answer 2

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

Answer 3

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;

Answer 4

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;
}