如何使用填充 100% 的锚/链接将 TD 中的文本居中

Question

已经进行了一些尝试来创建一个带有集成链接的 TD，该链接填充 TD 100%，因此当我将鼠标悬停在整个 TD 上时，我可以看到光标的变化，并且当通过 Tab 键选择整个 TD 元素时被选中等问题是我在不同的浏览器上得到不同的行为，我无法找到适用于不同浏览器的解决方案。主要是文本居中的问题。

如果我只有 TD 并创建一个 Javascript onclick 事件来处理点击等。文本在所有浏览器中都可以很好地居中，但我喜欢包含一个链接/锚点，以便用户可以通过标签来激活元素行为（对残疾人也很好）。

在TD中做一个不填充高度并正常居中的anchor也很容易，但是我有一个问题，整个TD在悬停时不改变光标，只是TD的中心可以被选中。

您可以在此处查看我的一些试验（稍后将被删除）：http://pcrypt.dk/dev/contact.php - 在例如 FF 和 Chrome 中进行测试。

这是 HTML 代码：

<table width=150 border=0>
<tr><td class=loginbutton id='sendtext'><a href=#><div style='height:100%; width:100%'>".$lang['contact']['PCCONTACTSENDBUTTON']."</div></a></td></tr>
<tr><td class=loginbutton id='sendtext'><a href=#><div style='display: table-cell; height:100%; width:100%'>".$lang['contact']['PCCONTACTSENDBUTTON']."</div></a></td></tr>
<tr><td class=loginbutton id='sendtext'><a href=#><div style='height:100%; width:100% display: table; overflow: hidden;'><div style='display: table-cell; text-align: center; vertical-align: middle;'><div style='text-align: center; vertical-align: middle;'>".$lang['contact']['PCCONTACTSENDBUTTON']."</div></div></div></a></td></tr>
<tr><td class=loginbutton id='sendtext'><a href=#><div style='height:100%; width:100% overflow: hidden;'><div style='text-align: center; vertical-align: middle;'><div>".$lang['contact']['PCCONTACTSENDBUTTON']."</div></div></div></a></td></tr>
<tr><td class=loginbutton id='sendtext'><a href=#><div style='width:100% overflow: hidden;'><div style='text-align: center; vertical-align: middle;'>".$lang['contact']['PCCONTACTSENDBUTTON']."</div></div></a></td></tr>
</table>

以及相关的CSS代码：

.loginbutton { font-weight: normal; text-align: center; vertical-align: middle; height: 26px; width: 150px; cursor: pointer; background-color: #d26628; color: #ffffff; font-size: 13px; }
.loginbutton a:link, a:visited, a:active { font-weight: normal; color: #ffffff; font-size: 13px; }
.loginbutton a:hover { font-weight: bold;}
.loginbutton:hover{ font-weight: bold; }

注意：我绝不是 CSS 专家 ;-)

PS：Stack Overflow（屏幕顶部）上的菜单 li 元素的行为并不像这样，只能用鼠标访问 - 认为这是错误的。

Answer 1

最佳解决方案

html

<table border="1" width="100%">
    <tr>
        <td>Stuff<br><br></td>
        <td>
            <a href="page.htm"><span> a Link </span></a>
        </td>
        <td>Stuff</td>
    </tr>
</table>

CSS

td {
    height: 100%;
}
a {
    display: table;
    position: relative;
    height: 100%;
    width: 100%;
    background-color: yellow;
}
span {
    display: table-cell;
    text-align:center;
    vertical-align: middle;
    background-color: red;
}

http://jsfiddle.net/74Wxn/

注意：

td需要height="100%"，你也可以添加到css中

Answer 2

有多种方法可以做到这一点。这是一个：

如果您想让<a> 元素填满整个空间，可以通过将其display 属性设置为inline-block 并将宽度和高度设置为100% 来实现。

所以，例如：

HTML

<table>
    <tr>
        <td>Stuff</td>
        <td><a href="http://www.example.com">A Link!</a></td>
        <td>More Stuff</td>
    </tr>
</table>

CSS

table td
{
    text-align: center; /*Aligns all content of td elements to center*/
}

table td a
{
    display: inline-block; /*Behaves like a div, but can be placed inline*/
    width: 100%; /*Full width of parent*/
    height: 100%; /*Full height of parent*/
    text-align: center; /*Centers content*/
}

The Fiddle

Answer 3

<style>
a {
    display: block;
    position: relative;
    height: 100%;
    background-color: yellow;
}
span {
    display: block;
    height: 50%;
    position: absolute;
    overflow: auto;
    margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;
    text-align:center;
    background-color: red;
}
</style>

<table border="1" width="100%">
    <tr>
        <td>Stuff<br><br></td>
        <td height="100%" width="30%">
            <a href="http://www.google.com" target="_blank">
                <span>A Link to Google!</span>
            </a>
        </td>
        <td>Stuff</td>
    </tr>
</table>

Answer 4

我认为你需要这个

<td align="center"><a href=""></a></td>