3

我有一个表格，input所有select字段都位于height:32px.
Firefox 将文本与顶部对齐，而所有其他浏览器则居中对齐。

我想将文本对齐到中心，但似乎有问题。
请问有什么建议吗？这是我的小提琴

在此处输入图像描述

<select id="month" class="" name="month">
    <option value="1">February</option>
    <option value="2">March</option>
    <option value="3">April</option>
    <option value="4">May</option>
    <option value="5">June</option>
    <option value="6">July</option>
    <option value="7">August</option>
    <option value="8">September</option>
    <option selected="" value="9">October</option>
    <option value="10">November</option>
    <option value="11">December</option>
    <option value="12">undefined</option>
</select>
<input type="text" value='some text' />

更新：line-height似乎没有做任何事情

#month, input {height:32px; line-height:32px; vertical-align:middle;}
#month select{line-height:32px;}
4

2 回答 2

2

实际上，如果您为选择框指定高度并观察各种浏览器中的文本对齐方式是不同的实现 firfox - 文本从左上角对齐 IE- 文本在底部 chrome 中对齐 - 在中心对齐

一种解决方案是为选择框提供填充，这也是一个最小的解决方案，因为如果您为 firfox 修复顶部填充，那么在 IE 中填充添加到顶部并且文本对齐到更底部。另一个问题是您提供的填充同样适用于选择下拉按钮。最好的解决方案是请避免选择框的高度并保持框的默认高度。如需进一步参考，请访问链接。这可以澄清 我想在选择框中垂直对齐文本

于 2012-10-27T07:49:09.573 回答
0

我的解决方案是使用填充和一些 css hack

#month{padding: 6px 0;}

我在jsfiddle中尝试过，它有效

于 2012-10-27T03:23:15.083 回答