如何对齐已设置为超链接的 <td> 中的文本

Question

我正在使用描述的解决方案

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

在我的表格超链接中创建 td 条目。这是一个不错且简单的解决方案。但是当我使用 display:block; 时会产生副作用。超链接文本向上移动一点并且不居中。下图显示了问题。如果您查看选定的 td “primary”，您会发现它太高了。

否则它是完美的，因为突出显示的 td 与我想要的蓝色 th 对齐。

我该如何纠正这个问题？

我正在使用的简化代码

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

使链接垂直居中的一种方法是使用行高。您可以为 td 分配固定高度，为“a”行高分配相同数量的像素

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

Answer 2

你尝试过使用 line-height 吗？

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

发生这种行为是因为您将display a 元素 作为block，具有固定大小的表格单元格（heigh: 100%），但元素内的文本具有具有默认大小的行（不受元素大小的影响）。