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

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.

 
    
        option 1
        number 2
    

---

B. Add top-padding to push down the text. (Pushed down the arrow in some browsers)

    option 1
    number 2

---

C. You can make the font larger to try and match the select height a little nicer.

    option 1
    number 2