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.

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

回答1:

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

回答2:

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

来源：https://stackoverflow.com/questions/32869987/how-to-align-the-text-in-a-td-which-has-been-setup-as-a-hyperlink