title: Center text in table via vertical align is not accurate
body: <p>I'm doing a HTML email and due to Outlooks horrible support I'm building all up on tables. The problem I have is, that I cannot vertically center a text within a <code>th</code> element. My markup is pretty simple:</p>
  
  <pre><code>&lt;table class="table"&gt;
     &lt;tbody&gt;
        &lt;tr&gt;
          &lt;th class="read-more"&gt;READ MORE&lt;/th&gt;
        &lt;/tr&gt;
     &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>with the following CSS:</p>
  
  <pre><code>.read-more { 
     background: none repeat scroll 0 0 #1fb4e6;
     border-bottom: 4px solid #1e9fc8;
     color: #ffffff;
     font-weight: lighter;
     height: 39px;
     text-align: center;
     vertical-align: middle;
     width: 120px;
  }
  </code></pre>
  
  <p>but as the provided image shows, it does not vertically center the text properly. It is slightly shifted above: </p>
  
  <p><a href="http://dev6.mass1.com/screen.png" rel="nofollow noreferrer">PICTURE</a></p>
  
  <p>I also tried to do it via <code>line-height</code> but that doesn't fix the problem.</p>