4

可能重复：
我想在选择框中垂直对齐文本

在这个小提琴中，下拉列表中的文本在 IE 和 Chrome 中垂直居中......但在 Firefox 中不是垂直顶部对齐的。如何在不干扰其他浏览器的情况下将其置于 Firefox 中？

HTML

<select>
    <option value="One" selected="selected">Test text one</option>
    <option value="Two">Test text two</option>
    <option value="Three">Test text three</option>
    <option value="Four">Test text four</option>
</select>

CSS

select {
    height: 30px;
    width: 260px;
    border: 1px solid #A9A3A3;
    font-family: Verdana,Geneva,sans-serif;
    font-size: 11px;
    }
4

2 回答 2

1

处理此问题的最佳方法不是为选择分配高度，而是添加填充以匹配其他元素的高度。

于 2013-02-03T16:06:31.900 回答
0

问题在于小提琴。他们的 iframe 将只有最小的必要大小（至少在 Firefox 中）。尝试类似的东西

div {
    height: 10em;
    display: table-cell;
    vertical-align: middle;
}

并<div>在您的<select>. 在实际场景中，您可能想要使用height: 100%绝对定位或只是修改包含您选择的任何标签的属性。

一开始误读了你的问题，这里是水平对齐的答案

body {
    text-align: center;
}

（或上面的任何标签<select>）

或者添加以下内容

margin-left:auto;
margin-right:auto;

但总的来说，最好为 设置一些值body以避免跨浏览器的差异（例如填充、边距和文本对齐）。

于 2013-01-30T17:21:40.103 回答