使用选择选项居中对齐文本

【问题标题】：Center Align Text with Select Option使用选择选项居中对齐文本
【发布时间】：2012-05-18 20:11:45
【问题描述】：

如何使用选择选项垂直对齐文本。

链接：http://mink7.com/projects/test/dashboard.html

【问题讨论】：

【解决方案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所示。

【讨论】：

【解决方案2】：

在 IE 和 Chrome 中，选择标记文本自动居中对齐，而不是在 Firefox 中。只针对具有填充的 Firefox，而不影响 IE 和 Chrome：对 FF 使用特定于浏览器的 hack 并给它一个 padding-top：

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

【讨论】：