html - 在表格单元格上方放置一个按钮并垂直对齐单元格中的文本

Question

我试图在表格单元格上方放置一个按钮，这是我取得的成就:

这是代码:

body {
    margin: 100px;
}
td {
    border: 1px solid black;
    padding: 20px;
    text-align: center;
    vertical-align: middle;
}

td span {
    text-align: center;
}

table {
    border-collapse: collapse;
}

#btn {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    height: 20px;
    top: -30px;
}

<table>
    <tr>
        <td>
            <button id='btn'>test</button>
            <span>Alfreds Futterkiste</span>
        </td>
        <td>Maria Anders</td>
        <td>Germany</td>
    </tr>
    <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
    </tr>
</table>

看起来不错，我已将按钮放在表格单元格上方。但有一件事困扰着我:第一个表格单元格中的文本没有垂直对齐。为什么？我使用了 vertical-align 但它不起作用。如何让它发挥作用

Answer 1

使用 position: absolute 从 DOM 流中分离 btn，这样它就不会像这样在测量中计算；

body {
    margin: 100px;
}
td {
    border: 1px solid black;
    padding: 20px;
    text-align: center;
    vertical-align: middle;
}

td span {
    text-align: center;
}

table {
    border-collapse: collapse;
}

#btn {
    height: 20px;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
}

.pos-relative {
  position: relative;
}

<table>
    <tr>
        <td class="pos-relative">
            <button id='btn'>test</button>
            <span>Alfreds Futterkiste</span>
        </td>
        <td>Maria Anders</td>
        <td>Germany</td>
    </tr>
    <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
    </tr>
</table>