How does vertical align work? How can it decide whether elements are aligned?

Answer 1

A web page is built on a coordinate plane, you can think of it like a sheet of graph paper with squares almost too tiny to see, because the squares are the size of the pixels in a given display. The TOP LEFT corner of the page is point (0,0), counting up from zero on the vertical (or Y) axis is moving down the page. Counting up on the horizontal (or X) is moving to the right across the page.

When you align an element vertically, you match up the top left corner of your element with a number-position on the vertical axis. The computer judges from the relative position of that top left corner, on multiple elements, to judge their alignment.