Центр выравнивания текста с опцией выбора

Question

Как вертикально Выровнять текст с помощью опции выбора.

Ссылка: http://mink7.com/projects/test/dashboard.html

Answer 1

Используйте этикетки как в this example fiddle. Разметка:

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

Когда это не работает, то есть некоторые наследуемые стили мешая и попытаться установить vertical-align: middle, как показано на this demo.

Answer 2

В IE и Chrome текст тега select выровнен по центру автоматически, а не в firefox. Чтобы использовать только firefox с дополнением, без ущерба для IE и Chrome: Используйте специальный броузер для FF и нанесите его на верхнюю часть:

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