firefox not vertically centering select input content with height specified

Question

here's an image of whats going on:

http://imageshack.us/photo/my-images/217/ffbug.png/

here's my code:

select {
    width: 150px;
    height: 40px;
    padding-left: 10px;
}

in chrome and firefox, it vertically-aligns the select values perfectly. in firefox, the values are stuck to the top of the select.

i've tried adding vertical-align: middle and line-height: 40px, both of which changed nothing.

Answered here: http://stackoverflow.com/questions/5439782/i-want-to-vertical-align-text-in-select-box — , Nov 10 '11 at 07:29

score 2 · Answer 1 · answered Nov 10 '11 at 07:30

2

Just use padding-top: 10px; padding-bottom: 10px; on that element. Your text will be automatically centerd.

answered Nov 10 '11 at 07:30

sascha

4,671
3
36
54

7

That will 'work', but it will also change the button within the ` – Cory Danielson Nov 10 '11 at 07:36

score 0 · Answer 2 · edited Jul 21 '14 at 11:56

0

Try this CSS code:

@-moz-document url-prefix() {
  select {
    padding-top: 13px;
  }
}

This should work, when you want multiple browser support.

edited Jul 21 '14 at 11:56

Jens Wirth

17,110
4
30
33

answered Jul 21 '14 at 11:31

Milkmannetje

1,152
1
10
35

score 0 · Accepted Answer · answered Nov 10 '11 at 10:11

i decided to put it in a div with this code:

.search li select {
    padding: 0px;
    margin: 0px;
}
.search li div {
    height: 32px;
    padding: 10px 10px 0px 10px;
    background: #ffffff;
}

the div background is same as the select background.

its pretty well centered in FF IE and chrome, only thing is the arrow is inside the padding as well...oh well...sometimes you can't win i guess.

firefox not vertically centering select input content with height specified

3 Answers3