css - 在填充空间的同时在 anchor 中垂直居中文本

Question

我正在创建一组选项卡 - 我需要遵循各种规则 - 其中之一是允许在 anchor 文本上换行。我目前的解决方案涉及 table-cell 来实现我需要的:

如您所见，这是有效的。选项卡水平居中，文本垂直居中，但是，我仍然需要解决一个问题。黄色区域代表 anchor ，红色区域代表 LI(表格单元格)。我需要的是 anchor 填充其父项中的可用空间，同时保持文本垂直对齐 - 换句话说，整个内容应该是黄色的。

这是我目前的代码:

   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 a
    {
        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>

更新

这是使用 BaTmaN 的 fiddle 的最新输出。

Answer 1

尝试

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

或您需要的适当填充