如何在< td>中对齐文本已被设置为超链接 [英] How to align the text in a <td> which has been setup as a hyperlink

问题描述

我正在使用

否则它是完美的，因为突出显示的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：单独; 
宽度：auto; 
 margin-top：5px; 
} 
 
 table th，td {
 color：Black; 
 vertical-align：middle; 
字体大小：20px; 
 font-weight：bold; 
 border：0; 
填充：0px; 
} 
 
 table th {
 color：White; 
背景：蓝色; 
} 
 
表a {
颜色：黑色; 
 text-decoration：none; 
 display：block; 
宽度：100％; 
身高：100％; 
填充：0px; 
} 
 
表a：悬停{
颜色：白色; 
背景：蓝色; 
} 
  

解决方案

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

  td {height ：30px; } 
 td a {line-height：30px;显示：块;宽度：100％;身高：100％;} 
  

I'm using the solution described at

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

to make the td entries in my table hyperlinks. This is a nice and simple solution. But it's produces a side effect when I use display:block;. The hyperlink text is shifted upwards a little and is not centered. The image below shows the problem. If you look at the selected td "primary" you'll see it's too high.

Otherwise it's perfect as the highlighted td lines up with the blue th which is what I want.

How can I 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 a {
color: Black;
text-decoration: none;
display: block;
width: 100%;
height: 100%;
padding: 0px;
}

table a:hover {
color: White;
background: Blue;
}

解决方案

A way to center vertically your link could be the use of line-height. You can assign a fixed height to the td and the same amount of pixels to the "a" line-height

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

这篇关于如何在&lt; td&gt;中对齐文本已被设置为超链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！