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

debugcn 发表于 Dev

兽

已经进行了一些尝试来创建具有完整链接的TD的TD，该链接可以填充TD 100％，因此，当我将鼠标悬停在整个TD上时，我可以看到光标的变化，并且通过点按该元素可以选中整个TD，从而进行选择。问题是，我在不同的浏览器上有不同的行为，而我找不到能够在不同的浏览器上工作的解决方案。通常是将文本居中的问题。

如果我只有TD并创建一个Javascript onclick事件来处理单击等事件，则文本在所有浏览器中都可以居中显示，但是我喜欢包含一个链接/锚，以便用户可以跳至该元素以激活行为（也可以非常适合残疾人士使用）。

在TD中锚定不填充高度并获得正常居中也很容易，但是这样的问题是，当悬停时整个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：堆栈溢出（屏幕顶部）上的菜单li元素的行为不像此btw，只能用鼠标访问-认为这是错误的。

阿图尔·古普塔（Atul Gupta）

最佳解决方案

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/

笔记：

height="100%" 在td上是必需的，您也可以将其添加到CSS

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-5

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章