How to center text in TD with anchor/link that fil

Question

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.

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).

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.

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.

Here is the HTML code:

<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>

And the relevant CSS code:

.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; }

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

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.

Answer 1

There are multiple ways to do this. Here's one:

If you want to make an <a> element fill the entire space, you can do so by setting its display attribute to inline-block and set the width and height to 100%.

So, for example:

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 2

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

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/

Note:

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

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

I think you need this

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