html - 对齐表格单元格中的按钮标签

Question

我有一个带有可见标签的隐藏按钮，我试图在表格单元格中居中对齐。

table {width: 150px}
table, td {
  border: 1px solid purple;
  text-align: center
}
label {
  background-color: red;
  height: 32px;
  width: 32px;
  border-radius: 50%;
  position: fixed
}
button {
  visibility: hidden
}

<table>
  <tr><td>
    Some title
  </td></tr>
  <tr><td>
    <label><button></button></label>
  </td></tr>
</table>

标签没有居中，溢出了 td。如果我删除

position: fixed

稍微好一点，但圆圈被压扁了。我怎样才能改进它以获得预期的结果？谢谢:)

此外，这里发生了什么？我非常感谢对学习 Material 的引用，以便我能够以结构化的方式理解此类 CSS 奥秘。

Answer 1

将 position:fixed; 替换为 display:inline-block;