如何對齊的這一直設置爲超鏈接

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幾乎是正確的，但稍微偏低。我第一次遇到他們作爲一個單位。這聽起來不錯，但似乎有點不尋常。我不確定自己在這種情況下完全得到了什麼。 –

這就是爲什麼我用像素來評論這個「//或你的行測量」，但是作爲我的客人，如果你沒有更多的疑問，這是重要的（： –

如何對齊的​​這一直設置爲超鏈接

回答

相關問題

如何對齊的這一直設置爲超鏈接