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 产生的副效果

完美