How to align text in a <td> that has been configured as a hyperlink

Question

I am using the solution described in

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

to make td entries in the hyperlinks of my table. This is a pleasant and easy solution. But it causes a side effect when I use display: block ;. The text of the hyperlink is slightly shifted up and not centered. The image below shows the problem. If you look at the selected td "primary", you will see it too high.

Otherwise, it is perfect, since the highlighted line td matches the blue that I want.

How can i fix this?

The simplified code that I use

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

Answer 1

By means of a vertical, vertical link, a height line can be used. You can assign a fixed height for td and the same number of pixels for "a" line-height

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

Answer 2

Have you tried to use linear height?

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

This is because you display a element as block , with a fixed table cell size ( heigh: 100% ), but the text inside the element has lines that have a default size (independent of the size of the element )