將文本與選擇選項對齊

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中，選擇標記文本自動對齊中心，而不是Firefox。爲了只使用填充來針對Firefox，而不影響IE和Chrome： 使用瀏覽器特定的FF for FF，並給它一個填充頂端：

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