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

Question

我正在尝试从 div 或表格单元格(或某些组合)创建按钮，其中文本可以是可变长度(因此使用 1、2 或 3 行打印出来)但链接应该都将整个将鼠标悬停在不同的单元格上，链接应适用于整个单元格。

我可以让文本居中对齐，但链接/背景仅应用于文本，或者我可以链接整个单元格，但文本 float 到顶部。

这是我的 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的 <a>到行的整个高度以使文本垂直对齐:

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

请注意，这仅在行的高度固定(看起来是)时才有效。否则，我认为你会倒霉，不得不使用 hover和 click td 本身的事件。