为什么我需要垂直对齐画布来对齐按钮

Why do I need to verticalAlign canvas to align button?

本文关键字：对齐 按钮 垂直 为什么      更新时间：2024-06-04

为了将按钮放在中间，我需要将vertical-align:middle;放在画布上。

把它放在td上会更有意义，但它没有任何作用。

为什么我需要在画布上放置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>

画布本身没有与任何内容对齐。它位于自己的基线上。通过垂直对齐：middle，您将画布的中间对齐到文本的基线，即文本的底部，而不是按钮的中间。

对于垂直对齐如何工作的非常详细的解释

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>

相关文章：