如何将文本在 div 或表格单元格中居中，将链接应用于整个单元格/div，其中文本可能为 1/2/3 行

Question

我正在尝试从 div 或表格单元格（或某种组合）创建按钮，其中文本可以是可变长度的（因此使用 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 {width: 549px;}
#rollover div.container td {text-align: center; vertical-align: middle;}
#rollover div.container tr{ height: 48px; background-image: url("../../images/div_bg.jpg")}
#rollover div.container td a { cursor: pointer; display:block; color: #FFF; margin: 0; width: 100%;}
#rollover div.container td a:hover {background-color: red; }

上面正确地垂直对齐文本，但链接/背景颜色仅适用于文本。我想要至少能在 IE7/8、FF 2/3、Chrome 和 Safari 中运行的东西。

提前致谢！

D

Answer 1

您可以将 的 line-height 设置为行的完整高度，以使文本垂直对齐：

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

请注意，这仅在行是一个固定的高度（看起来是这样）。否则，我认为您会运气不佳，并且必须使用 td 本身的 hover 和 click 事件。

Answer 2

有很多方法可以处理这个问题。最简单的方法是使用 javascript。特别是 jQuery。这样做，你就可以完全摆脱桌子了。将 A 标签设置为块，给它们一个宽度，浮动它们，然后在页面加载时，迭代它们以找到最高的标签，然后再次迭代它们，添加必要的顶部和底部填充，使它们看起来都像视觉上高度相同。

如果您不必使其与 IE 一起使用，则只需使用 CSS 和“显示表格/表格单元格”属性即可启用 Vertical-align:middle。

我过去使用过这些方法的组合，对于好的浏览器使用 CSS，对于 IE 则使用 JS 解决方案。