Question

I have a form with input and select fields all at height:32px.
Firefox aligns the text to the top while all the other browsers align center.

I would like to align the text to center, but seem to be having problems.
Any suggestions please? HERES MY FIDDLE

<select id="month" class="" name="month">
    <option value="1">February</option>
    <option value="2">March</option>
    <option value="3">April</option>
    <option value="4">May</option>
    <option value="5">June</option>
    <option value="6">July</option>
    <option value="7">August</option>
    <option value="8">September</option>
    <option selected="" value="9">October</option>
    <option value="10">November</option>
    <option value="11">December</option>
    <option value="12">undefined</option>
</select>
<input type="text" value='some text' />

update: line-height didnt seem to do anything

#month, input {height:32px; line-height:32px; vertical-align:middle;}
#month select{line-height:32px;}

Answer 1

my solution is use padding, and some css hack

#month{padding: 6px 0;}

I tried it in jsfiddle, it works