CODEWITHSUNDEEP
htmlcsshyperlinkhtml-table
Shane Gannon
Shane Gannon

Reputation: 7738

How to align the text in a <td> which has been setup as a hyperlink

I'm using the solution described at

How can I make a link from a <td> table cell

to make the td entries in my table hyperlinks. This is a nice and simple solution. But it's produces a side effect when I use display:block;. The hyperlink text is shifted upwards a little and is not centered. The image below shows the problem. If you look at the selected td "primary" you'll see it's too high.

Table td vertical alignment issue

Otherwise it's perfect as the highlighted td lines up with the blue th which is what I want.

How can I correct this?

The, simplified, code I'm using

----html----
<td>
    <div style="height:100%;width:100%;">
        <a href="my_url">
            primary
        </a>
    </div>
</td>

----css----
table {
background-color: White;
border: 10px solid Blue;
border-radius: 13px;
border-collapse: separate;
width: auto;
margin-top: 5px;
}

table th, td {
color: Black;
vertical-align: middle;
font-size: 20px;
font-weight: bold;
border: 0;
padding: 0px;
}

table th {
color: White;
background: Blue;
}

table a {
color: Black;
text-decoration: none;
display: block;
width: 100%;
height: 100%;
padding: 0px;
}

table a:hover {
color: White;
background: Blue;
}

Upvotes: 1

Views: 340

Answers (2)

gmast
gmast

Reputation: 192

A way to center vertically your link could be the use of line-height. You can assign a fixed height to the td and the same amount of pixels to the "a" line-height

td{ height: 30px; }
td a{ line-height: 30px; display: block; width: 100%; height: 100%;}

Upvotes: 1

Filipe Merker
Filipe Merker

Reputation: 2446

Have you tried to use line-height?

   table a {
      ...
      line-height: 1em; //or your row measure in pixels
   }

This behavior happens because you display the a element as a block, with the fixed size of the table cell (heigh: 100%), but the text inside the element have lines which have a default size (not affected by the size of the element).

Upvotes: 1

Related Questions