可能的重复项:
我想在选择框中垂直对齐文本
在这个小提琴中,下拉列表中的文本在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;
}
处理此问题的最佳方法不是为选择指定高度,而是添加填充以匹配其他元素的高度。
问题出在小提琴上。他们的 iframe 只有最小的必要大小(至少在 Firefox 中)。尝试类似的东西
div {
height: 10em;
display: table-cell;
vertical-align: middle;
}
并在<select>
周围放置一个<div>
。在实际场景中,您可能希望使用height: 100%
,绝对定位或只是修改包含您选择的任何标签的属性。
一开始误读了你的问题,这里是水平对齐的答案
body {
text-align: center;
}
(或<select>
上方的任何标签)
或者添加以下内容
margin-left:auto;
margin-right:auto;
但一般来说,最好为body
设置一些值以避免跨浏览器差异(例如填充、边距和文本对齐)。