css设置span和img垂直居中(设置line-height失效)

我要实现下图的样子,币种和旗子都是垂直居中,方法很简单,给img设置vertical-align:middle.在父容器上设置上line-height,效果以下

要实现span垂直居中,代码以下:

<style>
     .flag{
          position: absolute;
          bottom: 0;
          width: 23rem;
          height: 2.5rem;
          line-height: 2.5rem;
      }
      .flag img{
          width: 1.58rem;
          height: 2.1rem;
          vertical-align: middle;
      }
</style>


<div class="flag">
       <img src="./img/flag.png">              
       <span>币种:...</span>
</div>

解释一下这么写的缘由:

img是行内元素,会带有默认样式vertical-align:baseline

vertical-align是指定行内元素(inline)垂直对齐方式的(目前只有图片支持vertical-align属性,默认属性值是baseline,因此会致使图片产生一个3px左右的下边距,解决方法就是给vertical-align设置非baseline的内容)

官网解释vertical-align:baseline,使元素的基线与父元素的基线对齐;

父元素的基线,实际上解释的比较模糊,个人理解是父元素基线在父容器底部附近,可是尚未彻底到底;

我理解的:设置baseline的元素会影响周边行内元素,让baseline元素和周边元素都处于容器底部偏上一点点的基线位置

因此会出现这种状况,币种位于底部,即便设置了line-height也没法是币种垂直居中

解决方法:给旗子设置vertical-align:middle让旗子垂直居中,而后给父容器设置line-height让币种垂直居中

以上理解,若有错误,欢迎指正