超链接表格单元格文本未居中

Question

我正在尝试使我的表格的整个单元格可点击，并且我已经尝试了在这里找到的几乎所有解决方案，除非我的表格单元格最终是一个超链接，无论我做什么，文本都不会居中并且我需要一些帮助。

这是我的html：

table {
  border-collapse: collapse;
  width: 100%;
  height: 100%;
  text-transform: uppercase;
  letter-spacing: 1px;
}

td a {
  color: #333;
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
}

<table align="center" border="1">
  <tr>
    <td><a href="#">home</a></td>
  </tr>
</table>

这是它的 CSS：

下面是它的外观：

很抱歉，如果这是已被询问和回答的问题，经过三天的搜索，我个人无法在这里找到解决方案。感谢任何提供帮助的人！

Answer 1

这里不需要使用 flex。只需将display:block 设置为您的锚标记并添加一些填充以用于间距。

堆栈片段

table {
  border-collapse: collapse;
  width: 100%;
  height: 100%;
  text-transform: uppercase;
  letter-spacing: 1px;
}

td a {
  color: #333;
  display: block;
  padding: 20px;
  text-align: center;
}

<table align="center" border="1">
  <tr>
    <td><a href="#">home</a></td>
  </tr>
</table>

Answer 2

在锚标签中使用align-items: center;

table {
  border-collapse: collapse;
  width: 100%;
  height: 100%;
  text-transform: uppercase;
  letter-spacing: 1px;
}

td a {
  color: #333;
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
}

<table align="center" border="1">
  <tr>
    <td><a href="#">home</a></td>
  </tr>
</table>

Answer 3

table {
  border-collapse: collapse;
  width: 100%;
  height: 100%;
  text-transform: uppercase;
  letter-spacing: 1px;
}

td a, td a:link, td a:hover {
  display:block;
  color: #333;
  padding:40px;
  text-align:center;
  justify-content:center;
}

<table align="center" border="1">
  <tr>
    <td><a href="#">home</a></td>
  </tr>
</table>

这应该适合你。你不需要打破 flexbox，也不需要使td a width:100% height:100%。如果您只是为table 设置这些属性，td a 将会拉伸。

Answer 4

使用这个：

td a{text-align: justify;}