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

User · Answer

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.

User · Answer

display  flex  align-items  center

User · Answer

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

User · Answer

Your best option will probably be to adjust the top padding  amp  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     lt style gt      select          border  1px solid  ABADB3          margin  0          padding  auto 0          font-size 14px             lt  style gt       lt select gt           lt option gt option 1 lt  option gt           lt option gt number 2 lt  option gt       lt  select gt      B  Add top-padding to push down the text   Pushed down the arrow in some browsers    lt style gt  select      height  28px  important      border  1px solid  ABADB3      margin  0      padding  4px 0 0 0      font-size 14px     lt  style gt   lt select gt       lt option gt option 1 lt  option gt       lt option gt number 2 lt  option gt   lt  select gt      C  You can make the font larger to try and match the select height a little nicer    lt style gt  select      height  28px  important      border  1px solid  ABADB3      margin  0      padding  0 0 0 0      font-size 17px     lt  style gt   lt select gt       lt option gt option 1 lt  option gt       lt option gt number 2 lt  option gt   lt  select gt

User · Answer

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       lt div class  custom-select-container  gt         lt select gt           lt option gt  lt  option gt           lt option gt option 1 lt  option gt           lt option gt option 2 lt  option gt         lt  select gt         lt div class  custom-select  gt          Select an option        lt  div gt       lt div gt    CSS   custom-select position absolute  left 28px  top 10px  z-index 1  display block  pointer-events none

User · Answer

I ve tried as following and it worked for me    select        line-height normal       padding 3px

User · Answer

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

User · Answer

I used to use height and line-height with the same values  but the proved to be inconsistent across the interwebs  My current approach is to mix that with padding like so   select     font-size 14px    height 18px    line-height 18px    padding 5px 0    width 200px    text-align center      You could also use padding for the horizontal value instead of the width   text-align

User · Answer

My solution is to add padding-top for select targeted to firefox only like this     firefox vertical aligment of text  -moz-document url-prefix         select           padding-top  13px

User · Answer

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

User · Answer

So far this is working fine for me   line-height  100

User · Answer

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

User · Answer

I ran into this problem exactly  My select options were vertically centered in webkit  but ff defaulted them to the top  After looking around I didn t really want to create a work around that was messy and ultimately didn t solve my problem    Solution  Javascript   if    browser mozilla                    styledSelect select   css   padding-top   8px                 This solves your problem very precisely  The only downside here is that I m using jQuery  and if you aren t using jQuery on your project already  you may not want to include a js library for a one-off   Note  I don t recommend styling anything with js unless absolutely necessary  CSS should always be the primary solution for styling   think of jQuery  in this particular example  as the axe labeled  Break in case of Emergency     UPDATE  This is an old post and since it appears people are still referencing this solution I should state  as mentioned in the comments  that since 1 9 this feature has been removed from jQuery  Please see the Modernizr project to perform feature detection in lieu of browser sniffing

User · Answer

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

User · Answer

you can give     select     position absolute     top 50      transform  translateY -50        and to parent you have to give position relative  it will work

User · Answer

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

[css] I want to vertical-align text in select box

Examples related to css

Examples related to gwt

Examples related to select

Examples related to vertical-alignment