CODEWITHSUNDEEP
javascriptcsshtml
RainingChain
RainingChain

Reputation: 7756

Why do I need to verticalAlign canvas to align button?

In order to place the button in the middle, I need to put vertical-align:middle; to the canvas.

Putting it on the td would make a lot more sense but it does nothing.

Why do I need to place vertical-align:middle; on the canvas to vertical-align the button? 

<!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>

Upvotes: 0

Views: 74

Answers (1)

Clarence
Clarence

Reputation: 46

The canvas itself is not aligned to anything. It sits on its own baseline. By vertical-aligning:middle, you are aligning the canvas's middle to the baseline of the text which is the bottom of the text, not the middle of the button.

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>

Upvotes: 1

Related Questions