title: Vertically Center Text in an Input Element
body: <p>I have the following input element (I deliberately omitted attributes which weren't necessary for the example):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" style="display: block; height: 40px; font-size: 14px; line-height: 40px"/&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In Chrome and Internet Explorer (probably Opera too), any text inside the input will be vertically centred. However, Firefox seems to ignore this declaration. Setting it to <code>display: inline-block;</code> instead, or using <code>vertical-align: middle;</code> has no effect in Firefox.</p>
  
  <p>I've also tried setting the top &amp; bottom paddings to <code>13px</code>, and the height to <code>14px</code>, which (combined with the font-size) will result in an element <code>40px</code> tall. This works as expected; except any characters with tails (like <em>g</em>, <em>q</em>, <em>j</em> etc) are cut off at the bottom.</p>
  
  <p>I'm looking for a cross-browser solution for vertically aligning text in an input box with a fixed height. The input element will have its own hover and focus styles, so faking the centring by positioning the element itself vertically in a <code>40px</code> tall space is not really an option.</p>
  
  <p>Cheers</p>