内嵌框，其​​图像垂直对齐:中间与父框 [英] inline-box with image vertical-align:middle with parent box

问题描述

请运行演示:

  * {保证金:0;填充:0;}.身体 {字体家族:Microsoft Yahei；font-size:16px;背景颜色:浅蓝色；高度:200px；宽度:200像素；行高:2;}.body span {背景颜色:粉红色；}.body img {宽度:50px;高度:50px;}.body .img-wrapper {背景颜色:橙色；}.body .img-wrapper {垂直对齐:中间；}  

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

重点是我设置的

  .body .img-wrapper {垂直对齐:中间；} 

我期望下面图片中的红线在同一行:

根据

因此，我认为由于图像的存在，在这种情况下，父级的x高度不是第二条红线.

所以，我的问题是:

• 在这种情况下，父级的x高度是多少?是因为图像的存在而改变了吗?

• 还是其他地方有问题?

请注意:

• 在这种情况下，我只想获取 x-height 的值，所以我可以更好地理解 vertical-align .

• 我没有要求特定的解决方案.

无论多谢您的帮助！

解决方案

首先，元素的 x-height 不受图像的影响，仅由 font-size定义，当然还有使用的 font-family .然后，为了获得 x-height 的值，您需要考虑 ex 单位.

这是

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!

解决方案

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.

这篇关于内嵌框，其​​图像垂直对齐:中间与父框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！