css实现文字相对于图片垂直居中

一 要实现的样式,文字在图片的垂直居中位置

二 实现的代码:

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

三 解释一下这么写的原因:

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

2,vertical-align指定行内元素(inline)垂直对齐方式,默认属性值是baseline.

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

所以默认情况下会出现如下样式:币种位于底部,即使设置了line-height也无法让币种垂直居中

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

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