inline-box with image vertical-align:middle with parent box

Question

Please run the demo:

* {
  margin:0;
  padding:0;
}
.body {
  font-family:Microsoft Yahei;
  font-size:16px;
  background-color:lightblue;
  height: 200px;
  width:200px;
  line-height:2;
}
.body span {
  background-color:pink;  
}
.body img {
  width:50px;
  height:50px;
}
.body .img-wrapper {
  background-color:orange;
}
.body .img-wrapper {
  vertical-align:middle;
} 

<div class="body">
  <span class="wrapper">
      words-g words-g words-g
    <span class="img-wrapper">
      <img src="https://avatars3.githubusercontent.com/u/23273077" alt="">
        s
    </span>
    words-g words-g words-g
  </span>
</div>

The point is that I set

.body .img-wrapper {
      vertical-align:middle;
} 

I was expecting the red lines in below picture is in the same line:

According to the specification,

Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

So,I think:

• the vertical midpoint of the box is the first red line in the above picture and
• the baseline of the parent box plus half the x-height of the parent = the second red line

But it turns out I am wrong and I guess the key is x-height of the parent.So,I found this:

So, I thought x-height of the parent in this case is not the second red line because of the existence of the image.

So,my question is :

• how much is the x-height of the parent in this case? Is it changed because of the existence of the image?

• Or something else is wrong?

Please notice:

• I just want to get the x-height value in this case,so I can understand the vertical-align better.

• I am not asking for a specific solution.

Whatever thanks for your help!

Answer 1

First the x-height of the element is not affected by the the image and is only defined by font-size and of course the font-family used. Then in order to get the value of the x-height you need to consider the ex unit.

Here is a better illustration taken for this answer

You may clearly see the difference between each value of vertical alignment and also notice the illustration of em and ex unit. Now in order to have the exact value of x-height, you simply need to use the ex unit.

Here is an example:

* {
  margin:0;
  padding:0;
}
body {
  font-family:Microsoft Yahei;
  font-size:16px;
  background-color:lightblue;
  line-height:2;
}
span {
  background-color:pink;  
  border-right:1ex solid red;
  border-left:1em solid red; 
}
img {
  width:50px;
  height:50px;
}

<span>
    words-g words-g words-g
</span>
<br>
<span>
    words-g words-g words-g <img src="https://avatars3.githubusercontent.com/u/23273077" alt="">
</span>

As you can see I added a right and left border using ex and em units then if I check the computed value I can get the exact value. You will aslo notice that both span have the same value which indicate that the image has no impact on it.