title: Vertical alignment of text in container: WebKit vs Firefox
body: <p>The problem is that Firefox and WebKit based browsers seem to align text vertically in different ways when contained in an element that has an even height/line-height and the font-size is uneven (or vice versa). I have looked at some similar threads, but I haven't really seen any great explanations for my question.</p>
  <p>Consider the following example:</p>
  <pre class="lang-css prettyprint-override"><code>.box {
    font-size: 15px;
    font-family: Helvetica, Arial;
    background-color: Blue;
    height: 20px;
    width: 60px;
    color: White;
    line-height: 20px;
  }
  </code></pre>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;box&quot;&gt;
    A text.
  &lt;/div&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/EjsLI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EjsLI.png" alt="Example showing vertical alignment difference between Firefox and Chrome." /></a></p>
  <p>Is there any way to fix this? Is there any &quot;text-align&quot; property or something that I missed?</p>