TD 文本内容未垂直对齐

Question

我正在开发一个小型井字游戏，但在垂直对齐 TD 的内容时遇到问题。正如您在下面的屏幕截图中看到的，我将垂直对齐属性应用于选定的 TD，但文本仍然没有垂直居中，并且仍略低于正方形中心。

如何正确对齐 TD 的内容？

我将源文件上传到此 文件夹 中，以备需要时使用。

预先致谢，

---

我按照用户 Maik Lowrey 的建议附上了相关代码。

HTML

<div class="row"><div class="column d-flex justify-content-center">
        <table>
            <tr><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td></tr>
        </table>
    </div></div>

JS

let cells = document.querySelectorAll("td");
cells[selected_cell].innerText=event.key;

这就是我现在得到的，网格的结构已经改变，但字母仍然没有垂直对齐：

Answer 1

要将容器内的任何元素居中，请将以下 css 添加到容器中

.container{
  display: flex;
  justify-content: center;
  align-items: center;
}

Answer 2

只需使用 verticle-align:middle 来表格..它可以解决你的问题

Answer 3

使元素居中的一种方法是使用 text-align: center 进行水平对齐。还要将 line-height 设置为等于垂直对齐元素的 height。

示例：

.container {
  height: 85px;
  width: 85px;
  line-height: 85px;
  background-color: black;
  color: white;
  text-align: center;
}

<div class="container">1
</div>

请参阅：https://www.sitepoint.com/atoz-css-quick -尖端垂直/