I want to vertical-align text in select box_问答_开发者

I want to vertically align the text in select box. I tried using

select{
   verticle-align:middle;
}

howev开发者_C百科er 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>

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.

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

display: flex;
align-items: center;

So far this is working fine for me:

line-height: 100%;

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.

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;

I've tried as following and it worked for me:

select {
     line-height:normal;
     padding:3px;
}

you can give :

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

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

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

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

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

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.

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

You can also try margin:

.select{
    margin-top: 25px;
}

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