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

Try to set the "line-height" attribute

Like this:

select{
    height: 28px !important;
    line-height: 28px;
}

Here you are some documentation about this attribute:

http://www.w3.org/wiki/CSS/Properties/line-height

http://www.w3schools.com/cssref/pr_dim_line-height.asp

Answer 2

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.

Answer 3

display: flex;
align-items: center;

Answer 4

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

Answer 5

you can give :

select{
   position:absolute;
   top:50%;
   transform: translateY(-50%);
}

and to parent you have to give position:relative. it will work.

Answer 6

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.