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

Question

我试图让我的桌子的整个单元格可以点击，我已经尝试了几乎我在这里找到的每个解决方案，除非我的表格单元格最终是一个超链接，文本就不会居中我做了什么，我可以使用一些帮助。

这是我的HTML：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

以下是它的CSS：

以下是它的外观：

很抱歉，如果这是被要求和回答的问题，我个人无法在三天的搜索后找到解决方案。感谢任何有帮助的人！

Answer 1

这里不需要使用flex。只需将display:block设置为锚标记，然后为间距添加一些填充。

Stack Snippet

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这对你有用。您不需要打开Flexbox，也不需要td a宽度：100％高度：100％。如果您只为table设置这些属性，td a将会延长。

Answer 4

使用它：

td a {text-align：justify;}