Center Align Text with Select Option

Question

How to vertically Align a text with a Select Option.

Link: http://mink7.com/projects/test/dashboard.html

Answer 1

Use labels as in this example fiddle. Markup:

<form action="">
    <label for="startDate">Start Date:</label>
    <select id="startDate">
        <option value="Mar 04">Mar 04</option>
    </select>
    <label for="endDate">End Date:</label>
    <select id="endDate">
        <option value="Aug 04">Aug 04</option>
    </select>
</form>

When this does not work, then there are some inherited styles interfering and try to set vertical-align: middle as shown in this demo.

Answer 2

In IE and Chrome the select tag text is aligned center automatically, not in firefox. To only target firefox with a padding, without compromising IE and Chrome: Use a browser specific hack for FF and give it a padding-top:

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