对齐 table 单元格中的按钮标签

Question

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

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;

对齐 table 单元格中的按钮标签

Align button label in table cell

html

css

text-align

alignment