居中 HTML 表格单元格内容答案

【问题标题】：Center HTML Table Cell Content居中 HTML 表格单元格内容
【发布时间】：2016-02-07 20:26:35
【问题描述】：

我想创建一个 HTML 表格，并且我希望它的单元格是可点击的。但是，我已经实现了这一点，我无法将文本垂直对齐到单元格的中间。垂直对齐：中间似乎不起作用。

这是我的代码：

<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>

你能帮我解决这个问题吗？

谢谢！

【问题讨论】：

一个简单的谷歌建议display:table-cell，以及你的垂直对齐，如果你的表格至少被包裹在一个div中......在这种情况下你必须标识div并放置相关的那里有 CSS。
@MathBio 当我使用display:table-cell 时，它只使文本可点击。就我而言，我希望整个单元格都可以点击。
下面 Ashish Patel 给出的解决方案似乎可以满足您的需求。
为您发布了答案。你真的需要table 元素吗？ ...如果可以不这样做，那会是一个选择吗？

标签： html css

【解决方案1】：

最简单的方法是像这样在锚文本中添加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>

【讨论】：

【解决方案2】：

将此用于正确的独奏

    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%;
}

【讨论】：

不幸的是，这以一种非常奇怪的方式打破了队伍