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讓幣種垂直居中

以上理解,如有錯誤,歡迎指正