css - Centre text vertically in anchor whilst filling space -

i'm creating set of tabs - there various rules need follow - 1 of allow line wrapping on anchor text. current solution have involves table-cell achieve need:

as can see, works. tabs centered horizontally , text centered vertically, however, there still issue need resolve. yellow area represents anchor , red, li (table-cell). need anchor fill space available in parent whilst keeping text vertically aligned - in other words, whole thing should yellow.

here's code have far:

   ul.fixed-tabs       {          display: table;          table-layout:fixed;          margin:0 auto;      }            ul.fixed-tabs li      {          display:table-cell;          min-width:16rem;          max-width:26.4rem;          width:50%;                height:4.8rem;          vertical-align:middle;      }            ul.fixed-tabs li      {          display:block;          text-align:center;      }

<div class="content-tabs">    <ul class="fixed-tabs text-tabs two-up">      <li href="#"><a>terms of use</a></li>      <li><a href="#">privacy policy long longer longest</a></li>    </ul>  </div>

update

here's latest output using batman's fiddle.

try

ul.fixed-tabs li {     display:block;     text-align:center;     padding: 5px 2px;     height:100%; } 

or appropriate padding need