Inline-box With Image Vertical-align:middle With Parent Box

Please run the demo: 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 t

Solution 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.