Beast Beast - 1 month ago 13
CSS Question

How to center text in TD with anchor/link that fills 100%

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

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