Question

我想创建一个HTML表格，我希望它的单元格可以点击。然而，我已经实现了这一点，我无法在单元格中将文本垂直对齐到中间。 vertical-align：middle似乎不起作用。

这是我的代码：

<style type="text/css">

td {
  width: 200px;
  border: solid 1px green;
  height: 100%;
  text-align: center;
  vertical-align: middle;

}
td a {
  display: inline-block;
  height:100%;
  width:100%;


}
td a:hover {
  background-color: yellow;
}
</style>   

<table>
  <tbody>
    <tr>
      <td>
        <a href="http://www.google.com/">Cell 1<br>
        second line</a>
      </td>
      <td>
        <a href="http://www.google.com/">Cell 2</a>
      </td>
      <td>
        <a href="http://www.google.com/">Cell 3</a>
      </td>
      <td>
        <a href="http://www.google.com/">Cell 4</a>
      </td>
    </tr>
  </tbody>
</table>

你能帮帮我吗？

谢谢！

Answer 1

将此用于正确的解决方案

    td {
    border: 1px solid green;
    display: table;
    float: left;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    width: 200px;
}
td a {
    display: table-cell;
    float: none;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}

Answer 2

最简单的方法是在锚点文本中添加span，如下所示

td {
  width: 200px;
  border: 1px solid green;
  height: 100%;
  text-align: center;
  vertical-align: middle;
  position: relative;
}
td a {
  display: inline-block;
  width: 100%;
  height: 100%;
}
td a span {
  position: relative;
  display: inline-block;
  top: 50%;
  transform: translateY(-50%);
}
td a:hover {
  background-color: yellow;
}

<table>
  <tbody>
    <tr>
      <td>
        <a href="http://www.google.com/"><span>Cell 1<br>
        second line</span></a>
      </td>
      <td>
        <a href="http://www.google.com/"><span>Cell 2</span></a>
      </td>
      <td>
        <a href="http://www.google.com/"><span>Cell 3</span></a>
      </td>
      <td>
        <a href="http://www.google.com/"><span>Cell 4</span></a>
      </td>
    </tr>
  </tbody>
</table>

制作表格的更现代的方法，如果你能够稍微改变标记，就会是这样的。

.wrapper {
  display: table;
}
.wrapper a {
  display: table-cell;
  width: 200px;
  border: 1px solid green;
  height: 100%;
  text-align: center;
  vertical-align: middle;
}
.wrapper a:hover {
  background-color: yellow;
}

<div class="wrapper">
  <a href="http://www.google.com/">Cell 1<br>
    second line</a>
  <a href="http://www.google.com/">Cell 2</a>
  <a href="http://www.google.com/">Cell 3</a>
  <a href="http://www.google.com/">Cell 4</a>
</div>

中心HTML表格单元格内容

2 个答案: