title: Text is not vertically centered
body: <p>I'm using the line-height property to align some text to icons in a menu. I've created a simplified version (without icons) to illustrate my problem. It seems to be a problem with the general vertical alignment of fonts.</p>
  
  <p>You can see this problem on jsfiddle: <a href="http://jsfiddle.net/KFxG3/1/" rel="noreferrer">http://jsfiddle.net/KFxG3/1/</a></p>
  
  <p>The code is really simple:</p>
  
  <pre><code> &lt;div&gt;qb - Some text - qb&lt;/div&gt;
  </code></pre>
  
  <p>An adding a style:</p>
  
  <pre><code> div {
       background-color: green;
       height: 22px;
       line-height: 22px;
       font-size: 20px;
       font-family: 'Segoe UI', 'Verdana', 'Arial';
   }
  </code></pre>
  
  <p><br>
  This is how it looks like:</p>
  
  <p><img src="https://i.stack.imgur.com/5hNL8.png" alt="This is how it looks like"></p>
  
  <p>And this is how it SHOULD look like:</p>
  
  <p><img src="https://i.stack.imgur.com/G8GVS.png" alt="And this is how it SHOULD look like"></p>
  
  <p>Why does this happen in newer browsers? I've tested it on Windows 8.1 64 bit in Firefox 27.0.</p>
  
  <p>EDIT: I want to know, WHY the browsers does not render correctly. A small letter like 'a' should get the same space to the top and bottom of the 'green', when applying a line-height thats as height as the container. But the rendering is wrong.</p>
  
  <p>EDIT#2: It's an issue with the font. Segoe UI seems to have a strange baseline. When using Arial, Verdana or whatever vertical alignment fits better (but it's also not perfect). -> <a href="http://jsfiddle.net/KFxG3/22/" rel="noreferrer">http://jsfiddle.net/KFxG3/22/</a></p>