将文本与选择选项对齐

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