Question

我的愿望很简单 - 制作一个可点击的单元格（即带有链接的单元格），其最小高度要求（在这种情况下为40像素）蚂蚁垂直居中的文本。这是我到目前为止所提出的：

<html>
<head>
<style>

table.test td {
  border:1px solid black;
  width: 200px;
  height: 100%;}

table.test td.cell a {
  background-color: #FFF5EE;
  display:inline-block;
  height:100%; width:100%;
  min-height: 40px;}

table.test td.cell a:hover, td.cell a:active {
  background-color: #D2691E;}

</style>
</head>
<body>

<table class="test">
  <tr>
    <td class="cell"><a href="www.google.lt">Google</a></td>
    <td>Line1</td>
  </tr>
  <tr>
    <td class="cell"><a href="www.google.lt">Google</a></td>
    <td>Line1<br>Line2<br>Line3</td>
  </tr>
</table>

</table>
</body>
</html>

一切都很好，但是我无法将文本垂直对齐（居中）：/ vertical-align属性在这种情况下不起作用。

以下是行动中的示例（link）。

Answer 1

删除行

height: 100%;

这

table.test td.cell a { ... }

并添加

vertical-align: middle;

到

table.test td { ... }

Answer 2

尝试以下css使文本居中并垂直对齐：

  table.test td { 
  text-align:center;
  vertical-align:middle
  }

Answer 3

使用vertical-align：

http://jsfiddle.net/pN4pQ/1/

Answer 4

试试这个::

.cell {
    line-height: 4em;
}

和水平对齐

.cell {
    line-height: 4em;
    text-align: center;
}

http://jsfiddle.net/HA6Wq/1/

Answer 5

好的，我做了很多修改并包含了jquery，但我认为这就是你想要的

所以我们走了：

<html>
<head>
//Really important, put this if you want the jquery to work
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<style>

table.test td
{border:1px solid black;
width: 200px;
height: 40px;}

.cell 
{background-color: #FFF5EE; 
cursor:pointer;}

.hover
{background-color: #D2691E;}


</style>
<script>
    $(document).ready(function() {
            //Replace your link and redirect when you click on the cell
        $(".cell").click(function() { window.location = 'http:\www.google.lt'});
            //Since you can't put a hover class on a td, you have to do it in jquery
        $(".cell").hover(function() { $(this).addClass("hover");}, function() {$(this).removeClass("hover");});

    });
</script>


</head>
<body>

<table class="test">
<tr>
<td class="cell">Google</td>
<td>Line1</td>
</tr>
<tr>
<td class="cell">Google</td>
<td>Line1<br>Line2<br>Line3</td>
</tr>
</table>

</table>
</body>

我把最小高度作为td风格的高度

我知道这是一个很大的改变，但它正在发挥作用：）

这是小提琴：http://jsfiddle.net/d9CGX/

编辑：

我已经更新了小提琴：http://jsfiddle.net/d9CGX/2/所以你可以有多个链接

Answer 6

如果它帮助我这样做并将链接切换到javascript onclick：

.tdmenu 
{
    vertical-align : middle;
    padding-left : 10px;
    padding-right : 10px;
}
.tdmenu:hover
{
    background-color : rgb(220,220,220); /*set color to whatever you like*/
    cursor : pointer;
}

我的HTML

<table cellpadding="2" cellspacing="0" style="height : 40px; background-color : rgb(255,255,255);">
<tr style="height : 100%;">
    <td class="tdmenu" onclick="document.location='Default.aspx';">Home</td>
    <td class="tdmenu" onclick="document.location='Projects.aspx';">Projects</td>
</tr>
</table>

似乎玩得很好。

Answer 7

我也遇到了类似的情况，花了很多小时才弄清楚。此方法将允许您垂直对齐和居中。替换您的

<a href="http://www.linkhere.com"></a>

使用此代码。

<div style="display:table;width:100%;height:100%;">
    <a href="http://www.linkhere.com" style="display:table-row;">
        <div style="display:table-cell;vertical-align:middle;align-text:center;">
            Link contents go here
        </div>
    </a>
</div>

当然，将链接的内容放入div表单元中。这还将链接延伸到您用于此代码的容器的边缘。希望有帮助。

无法垂直对齐表格单元格中的链接

7 个答案: