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

i'm using solution described at

how can make link <td> table cell

to make td entries in table hyperlinks. nice , simple solution. it's produces side effect when use display:block;. hyperlink text shifted upwards little , not centered. image below shows problem. if @ selected td "primary" you'll see it's high.

otherwise it's perfect highlighted td lines blue th want.

how can 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 { color: black; text-decoration: none; display: block; width: 100%; height: 100%; padding: 0px; }  table a:hover { color: white; background: blue; } 

a way center vertically link use of line-height. can assign fixed height td , same amount of pixels "a" line-height

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