To which point of the text does "vertical-align: middle" align the image to? What is the formula?

HTML-CSS
1 
<style>
  img,
  span {
    display: inline-block;
    font-family: Arial;
  }
</style>
<body>
  <img src="https://placehold.co/200" style="vertical-align:middle;">
  <span style=" background-color:blue; font-size:36px; ">Sample Text</span>
</body>

How exactly the image vertical offset is calculated here, what formula? From my understanding, vertical-align:middle in the image should move it’s vertical midpoint to some specific point of the text, but how exactly?

2

Documentation: "middle - Aligns the middle of the element with the baseline plus half the x-height of the parent. "

But it DOESN’T WORK like that. Proof:
312

3

hi and welcome to the forum.

I cannot tell the context of your question from your post. Is this about something you saw in fCC? Can you post a link to it?

4

I would assume you need to align both elements to the middle.

The MDN article on vertical-align links to an article that seems to go in great depth, if you really want to. I didn’t read it all.

5

The context is that I wasn’t able to understand how vertical-align works exactly while I was learning html, so I tried to ask this on StackOverflow, but instead got all my questions and accounts deleted because apparently this is a too stupid question. So I googled “web dev forum” and here I am. But fortunately, I found the answer myself a day later, by testing.

6

Thank you for the link, I will definitely read it, but in my case setting both elements to “middle” didn’t help.
Instead, the answer was - Text offset depends on the font size of it’s parent (in my case, the parent is body)
I have realized it by doing more tests.