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 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!

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.

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

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.