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

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