为什么此下拉列表中的文本不会在Firefox中垂直居中？

Question

  

可能重复：
  I want to vertical-align text in select box

在此fiddle中，下拉列表中的文字在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;
    }

Answer 1

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

Answer 2

问题在于小提琴。他们的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设置一些值，以避免跨浏览器的差异（例如填充，边距和文本对齐）。