如何中心文本在TD与锚点/链接，填充100％ [英] How to center text in TD with anchor/link that fills 100%

问题描述

已经做了一些尝试，创建一个TD与一个集成的链接，填充TD 100％，所以当我将鼠标悬停在整个TD我可以看到光标的变化，当选中通过选项卡到整个TD问题是，我在不同的浏览器之间得到不同的行为，我找不到一个解决方案，适用于不同的浏览器。

Have made some trials to create a TD with an integrated link that fill the TD 100% so when I hover the mouse over the entire TD I can see a change of the cursor and when selected by tabbing to the element the entire TD gets selected etc. The problem is that I get different behavior across different browsers and I am unable to find a solution that works across different browsers. Mostly a problem to center the text.

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

If I only have the TD and make a Javascript onclick event to handle the click etc. the text is centered fine in all browsers, but I like to include a link/anchor so the user can tab to the element to activate the behavior (also nice for disabled people).

这也很容易在TD上做一个锚点，不能填满高度并获得正常的居中，但是我有一个问题，整个TD不会改变

It is also easy to make a anchor in the TD that do not fill the height and get normal centering, but then I have the problem that the entire TD does not change the cursor when hovering and just the center of the TD can be selected.

您可以在这里看到我的一些试验（稍后将被删除）： http://pcrypt.dk/dev/contact.php - 在例如FF和Chrome中测试它们。

You can see some of my trials here (will be deleted later): http://pcrypt.dk/dev/contact.php - test them out in for example FF and 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专家; - ）

NB: I am in no way a CSS expert ;-)

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

PS: The menu li elements on Stack Overflow (top of the screen) do not behave like this btw and can only be accessed with a mouse - think it is wrong.

推荐答案

最佳解决方案

html

Best solution

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

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/74W​​xn/

height =100％在td上是必需的，您可以将其添加到css中

height="100%" is required on td, you can add it to css also

这篇关于如何中心文本在TD与锚点/链接，填充100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！