中心将文本与选择选项对齐

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使用特定于浏览器的黑客并给它一个填充顶部：

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