4

Possible Duplicate:
I want to vertical-align text in select box

In this fiddle the text in the drop down list is vertically centered in IE and Chrome...but not in Firefox where it is vertically top aligned. How do I center it in Firefox without disrupting the other browsers?

HTML

<select>
    <option value="One" selected="selected">Test text one</option>
    <option value="Two">Test text two</option>
    <option value="Three">Test text three</option>
    <option value="Four">Test text four</option>
</select>

CSS

select {
    height: 30px;
    width: 260px;
    border: 1px solid #A9A3A3;
    font-family: Verdana,Geneva,sans-serif;
    font-size: 11px;
    }
Community
  • 1
  • 1
  • misread at first. (horizontal vs vertical...) Updated my answer to include vertical alignment. – example Jan 30 '13 at 17:38
  • Check out this post. That may answer your issue. http://stackoverflow.com/questions/952861/targeting-only-firefox-with-css – New Developer Feb 03 '13 at 16:32
  • 1
    The actual reason for this is because Firefox specifies "line-height:normal !important" for select elements in its forms.css, which cannot be overridden. – Shelly Skeens Apr 15 '13 at 15:12

2 Answers2

1

The best way to handle this is not to assign a height to the select but to add padding to match the height of the other elements.

Mark Lehm
  • 21
  • 2
0

the problem lies with fiddle. Their iframe will only have the minimal necessary size (in firefox at least). Try something like

div {
    height: 10em;
    display: table-cell;
    vertical-align: middle;
}

and place a <div> around your <select>. In a real scenario you might want to use height: 100%, absolute positioning or just modify the attributes of whatever tag contains your select.

misread your question at first, here the answer for horizontal alignment

body {
    text-align: center;
}

(or whatever tag is above the <select>)

alternatively add the following 

margin-left:auto;
margin-right:auto;

but in general it is a good idea to set some values for the body to avoid cross-browser differences (e.g. padding, margin and text-align).

example
  • 3,349
  • 1
  • 20
  • 29
  • hmm ok might not be fiddles fault but in fact different behaviours of the `iframe` tag in the different browsers. still: in any real scenario my solution should work. – example Jan 30 '13 at 17:43
  • the problem is with the actual text in firefox. Adding margin-left and right to auto will not fix the problem. Try to create a simple ` – Sam Jul 01 '20 at 15:19