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