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

Mik*_*ike 6 html css html-table

我的愿望很简单 - 制作一个可点击的单元格(即带有链接的单元格),其最小高度要求(在这种情况下为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>
Run Code Online (Sandbox Code Playgroud)

一切都还可以,但我无法将文本垂直对齐(居中):/该vertical-align属性在这种情况下不起作用.

这是行动中的例子(链接).

dav*_*vid 0

尝试使用以下 css 将文本居中并垂直对齐:

  table.test td { 
  text-align:center;
  vertical-align:middle
  }
Run Code Online (Sandbox Code Playgroud)