垂直居中输入框

Question

我在页面上有一个文本输入框，但是我发现在webkit（Chrome + Safari）中垂直居中这个输入框很困难。在FireFox中没有问题。

以下是代码：

<form action="/" method="get">
    <input type="text" name="s" id="search" class="search" size ="34" value="Search..." onblur="if(this.value == ''){ this.value = 'Search...'; this.style.color = '#BBB';}" onfocus="if(this.value == 'Search...'){ this.value = ''; this.style.color = '#000';}" />
    <input class="schbtn"ntype="submit" value="" />
</form>

以下是CSS代码：

.schbtn {background:url(/wp-content/themes/shamil/images/search_icon.png) no-repeat scroll 50% 50% #7BA60D;height:26px; width:26px;}
#navtabs li.rnavtab input{border:0;padding-left:5px;color:#BBB;}

这是唯一影响它的两个因素。

想要看到实际效果的人，请访问http://shamil.la，并观察Firefox和Safari/Chrome中的搜索字段。这让我抓狂了。

谢谢。

- bear

Answer 1

在两个输入元素上添加 vertical-align:middle;，这将使它们居中显示。

- Brett