如何对齐的这一直设置为超链接

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

，使我的表中的超链接的TD条目。这是一个不错的简单解决方案。但是当我使用display：block;时会产生副作用。超链接文本向上移动一点而不居中。下面的图片显示了这个问题。如果你看看选定的td“主”，你会发现它太高。

否则，它是完美的突出TD线与蓝色日这就是我想要的。

我该如何解决这个问题？

的，简化的，代码我使用

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

来源

2015-09-30 Shane Gannon

'表TD {文本对齐：中心;}' –

没有这样的运气。我试过，但它似乎被忽略时显示：块;用来。可以肯定，我把它设置在td，a和div上。 –

垂直居中链接的方法可能是使用行高。您可以固定高度的TD和像素相同数量分配到“一”行高

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

来源

2015-09-30 15:41:05 gmast

谢谢。line-height解决了设置在th/td和a。 –

您是否尝试过使用行高？

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

此行为是因为你display的a元素作为block，与表格单元格（heigh: 100%）的固定大小，但该元素中的文本有哪些有一个默认的尺寸线（不受影响大小为元件）。

来源

2015-09-30 15:38:58

gmast在这个答案后发布了一点点，但我发现答案更有用。设置1em导致“主”向上移动一点。设置2em几乎是正确的，但稍微偏低。我第一次遇到他们作为一个单位。这听起来不错，但似乎有点不寻常。我不确定自己在这种情况下完全得到了什么。 –

这就是为什么我用像素来评论这个“//或你的行测量”，但是作为我的客人，如果你没有更多的疑问，这是重要的（： –

如何对齐的​​这一直设置为超链接

回答

相关问题

如何对齐的这一直设置为超链接