How do you vertically align elements with text?

Question

Design

It is often necessary to align an element with text vertically in a graph. editor, and thought about how to align correctly: including the protruding lines of letters or not.
Suppose there is a letter "b" at the top of the element being aligned, or at the bottom "r", and you make even indents from the protruding parts or from ordinary letters?

Answer 1

Most likely, do not take into account the bottom, but take into account the top (there are still capital letters).
In general, editors usually have mutual alignment buttons, in browsers, depending on the situation, I use either vertical-align:middle or flexbox. I didn’t even think about what exactly it aligns, just see how it looks better.

Answer 2

Everything depends on the situation. You are trying to cover too much area with a question, vertical alignment is detailed in many typography books.
Are you familiar with the concept of visual weight?

Answer 3

It is necessary to align on the baseline, obviously. On the fingers: let's take two words - bug and humus, the base line will run from "b" to "c", being located closely below them, crossing the legs of the letters "y".

Answer 4

display:inline-block; vertical-align:???;
Ready.