为了将按钮放在中间，我需要将 vertical-align:middle; 放到 Canvas 上。
把它放在 td 上会更有意义，但它什么也没做。
为什么我需要在 Canvas 上放置 vertical-align:middle; 来垂直对齐按钮？
<!DOCTYPE html>
<table>
<tr>
<td>
<button>Hey</button>
</td>
<td>
<canvas width="40px" height="40px"
style="vertical-align:middle; border:2px solid black">
</canvas>
</td>
</tr>
</table>
最佳答案
Canvas 本身没有对齐任何东西。它位于自己的基线上。通过 vertical-aligning:middle，您将 Canvas 的中间对齐到文本的基线，即文本的底部，而不是按钮的中间。
for a very detailed explanation of how vertical-align works
button {
font-size: 24px;
padding: 20px 0 10px;
}
div {
font-size: 60px;
padding: 10px 0 20px;
background: blue;
display: inline-block;
}
canvas {
width: 100px;
height: 100px;
border: 2px solid black;
vertical-align: middle;
}<button>Hey</button>
<div>Hey</div>
<canvas></canvas>关于javascript - 为什么我需要垂直对齐 Canvas 来对齐按钮？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28736815/