Line box the reason why text-align and vertical-align are very different

text-align, useful if you have a block element and need to horizontally align the inline elements inside of it.

vertical-align, useful if you have an inline element(e.g. an image) and need to vertically align it inside its line box.

Example

See the Pen text-align and vertical-align are very different by Wilson Camilo Uribe Neira (@kmilo0) on CodePen.

If you're confused with the vertical-align example an explanation about line box could be what you need.

Line box

The code

<p>
    Good design will be better.
    <span class="a">Ba</span>
    <span class="b">Ba</span>
    <span class="c">Ba</span>
    We get to make a consequence.
</p>
    

Will generate 3 line-boxes:

• the first and last one each contain a single anonymous inline element (text content)
• the second one contains two anonymous inline elements, and the 3 <span>

A <p> (black border) is made of line-boxes (white borders) that contain inline elements (solid borders) and anonymous inline elements (dashed borders)

See also

Deep dive CSS: font metrics, line-height and vertical-align