встроенный блок с изображением по вертикали: средний с родительским блоком

Question

Пожалуйста, запустите демо:

* {
  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>

Дело в том, что я установил

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

Я ожидал, что красные линии на рисунке ниже находятся в той же строке:

В соответствии со спецификацией ,

Совместите вертикальную среднюю точку бокса с базовой линией родительского бокса плюс половинуx-высота родителя.

Итак, я думаю:

• вертикальная средняя точка прямоугольника - это первая красная линия на рисунке выше и
• базовая линия родительского блока плюс половина x-высоты родителя = вторая красная линия

Но, оказывается, я ошибаюсь, и я предполагаю, что ключ равен x-heightродителя . Итак, я нашел это:

Итак, я подумал, х-высота родителя в этом случае невторая красная линия из-за существования изображения.

Итак, мой вопрос:

• сколько стоит высота x родителя в этом случае?Изменилось ли оно из-за наличия изображения?

• Или что-то еще не так?

Обратите внимание:

• Я просто хочу получить значение x-height в этом случае, чтобы я мог лучше понять vertical-align.

• Я не прошу конкретного решения.

В любом случае спасибо за вашу помощь!

Answer 1

Во-первых, x-height элемента не зависит от изображения и определяется только font-size и, конечно, font-family.Затем, чтобы получить значение x-height, вам нужно рассмотреть единицу ex.

Вот лучшая иллюстрация, сделанная для этого ответа

Вы можете ясно видеть разницу между каждым значением вертикального выравнивания, а также обратите внимание на иллюстрацию em и ex единицы.Теперь, чтобы иметь точное значение x-height, вам просто нужно использовать единицу ex.

Вот пример:

* {
  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>

Как видите, я добавил правую и левую границу, используя единицы ex и em, тогда, если я проверю вычисленное значение, я могу получить точноезначение.Вы также заметите, что оба значения span имеют одинаковое значение, что указывает на то, что изображение не оказывает на него никакого влияния.