title: How to vertically center anchor tag text inside of a ul li
body: <p>Here is my html:</p>
  
  <pre><code>&lt;ul id="sub_nav" class="block_hide trim no_list no_line" style="display: block; left: 524.5px;"&gt;
  &lt;li&gt;&lt;a href="/path1" class="one"&gt;1st button&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="/path2" class="one"&gt;2nd button&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="/path3" class="one"&gt;3rd button&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I also attached an image if what I currently have. I tried adding display: table-cell;
  vertical-align: middle;  to the anchor tag class but it did not work I also tried adding a span around teh anchor tag with a class with: display: table-cell; vertical-align: middle; but that did not work either, in both cases button's heights were not constant.</p>
  
  <p>How can I vertically center text and keep my buttons height and width the same?</p>
  
  <p><img src="https://i.stack.imgur.com/PAW5r.png" alt="enter image description here"> </p>
  
  <p>Ended up going with the display:table-cell solution as it was the most cross browser....I did not like it at first because I had to hard code the width of my button instead of 100% but once I got past that it was a solid solution:
      my li:</p>
  
  <pre><code>.header #sub_nav li {
      display: table;
      float: left;
      font-size: 11px;
      line-height: 12px;
      margin-bottom: 12px;
      margin-left: 12px;
      width: 86%;
  }
  </code></pre>
  
  <p>my a:</p>
  
  <pre><code>    .header #sub_nav li a {
      display: table-cell;
      height: 45px;
      vertical-align: middle;
      width: 111px;
  }
  </code></pre>