Css 如何在div或表格单元格中居中显示文本，使链接应用于整个单元格/div，其中文本可以是1/2/3行

我试图从div或table单元格（或某些组合）创建按钮，其中文本可以是可变长度的（因此使用1、2或3行打印），但链接应同时将整个单元格变成悬停的另一个单元格，链接应应用于整个单元格

我可以使文本中心对齐，但链接/背景仅应用于文本，也可以使整个单元格链接，但文本浮动到顶部

以下是我的HTML/PHP：

<div id="rollover"><div class="container">
  <table><tr>
    <?php foreach ($field_landing_button_links as $btnlink) : ?>
      <td class="list" width="<?php echo $width;?>%"> 
        <a href ="<?php echo $btnlink['display_url'];?>">
         <div class="cell"><?php echo $btnlink['display_title'];?></div>
        </a>
      </td>
    <?php endforeach; ?>
  </tr></table>
</div></div>

您可以将
的
行高设置为行的全高，以使文本垂直对齐：

#rollover div.container td a { height: 48px; line-height: 48px; }

请注意，这仅适用于行为固定高度（看起来是固定高度）的情况。否则，我认为你会运气不佳，必须使用td本身的
悬停
和
点击
事件。
。最简单的方法是使用javascript。特别是jQuery。这样做，你就可以完全摆脱这张桌子了。将A标记设置为块，给它们一个宽度，将它们浮动，然后在页面加载时，遍历它们以找到最高的标记，然后第二次遍历它们，添加必要的顶部和底部填充，使它们在视觉上看起来都一样高

如果你不必让它与IE一起工作，你可以只使用CSS和“显示表格/表格单元格”属性，然后启用垂直对齐：中间

我以前使用过这些方法的组合，使用CSS作为好的浏览器，使用JS作为IE的解决方案。
啊，我错过了“文本可能是1/2/3行”部分。线的高度在这里不起作用。
#rollover div.container td a { height: 48px; line-height: 48px; }