title: Vertically center input field
body: <p>I have a text input field on a page, however, I'm finding it difficult trying to vertically center the field in webkit (Chrome + Safari). It is fine in FireFox.</p>
  
  <p>Here's the code:</p>
  
  <pre><code>&lt;form action="/" method="get"&gt;
      &lt;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';}" /&gt;
      &lt;input class="schbtn"ntype="submit" value="" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>.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;}
  </code></pre>
  
  <p>These are the only two which affect it.</p>
  
  <p>For those wanting to see this in action, visit, <a href="http://shamil.la" rel="nofollow">http://shamil.la</a>, and observe the search field in both Firefox and Safari/Chrome. It's driving my head up the wall.</p>
  
  <p>Thanks</p>