img 圖片與文字對齊，圖標與標題對齊

img 圖片與文字對齊，圖標與標題對齊

很多時候，在頁面中會遇到圖標與文字混排的情況，用 vertical-algin: middle 並不能讓圖片完全對齊於文字。

目的是達成這種效果：（這並不是用 vertical-align 實現的）

先看一下用 vertical-align 的樣子

vertical-align: middle 是設置在 img 上的，此時雖然能湊合看，但並不完美。作爲完美主義者是肯定受不了的。

一種完美的解決方法

html 結構是這樣的

<div class="coin-title">
    <img src="img/coin/BTC.png" alt="BTC">
    <h5>BTC</h5>
</div>

scss （不瞭解 scss 的移步這裏：scss 基礎用法）

.coin-title {
    line-height: 1;
    color: white;
    margin-bottom: 8px;
    > img {
      float: left;
      height: 1rem;
      display: block;
    }
    > h5 {
      font-size: 1rem;
      padding-left: 20px;
    }
    &:after{  // clearfix
        content: '';
        clear: both;
        display: block;
    }
}

實現原理是這樣的，<img> 與 <h5> 同時包裹在 div 中

1. 讓 <img> 和 <h5> 都以 block 顯示
2. 給 <img> 設置高度與 <h5> 一致，此時 <img> 會自動等比例縮放到這個高度
3. 讓 <img> float: left，此時 <img> 就會脫離佈局
4. 給 <h5> 設置 padding-left，並大於 <img> 的寬度，<img> 就會出現在 <h5> 的左邊，兩者重疊
5. 最好在父元素 div 上添加一個 clearfix 抵消掉上面 float 產生的副效果

完美