我试图在表格单元格上方放置一个按钮,这是我取得的成就:
这是代码:
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
但它不起作用。如何让它发挥作用
最佳答案
使用 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>
关于html - 在表格单元格上方放置一个按钮并垂直对齐单元格中的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72605334/