img 图片与文字对齐，图标与标题对齐

img 图片与文字对齐，图标与标题对齐

很多时候，在页面中会遇到图标与文字混排的情况，用 vertical-algin: middle 并不能让图片完全对齐于文字。

目的是达成这种效果：（这并不是用 vertical-align 实现的）

先看一下用 vertical-align 的样子

vertical-align: middle 是设置在 img 上的，此时虽然能凑合看，但并不完美。作为完美主义者是肯定受不了的。

一种完美的解决方法

html 结构是这样的

    
    
BTC

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

实现原理是这样的， 与

同时包裹在 div 中

1. 让 和

   都以 block 显示

2. 给 设置高度与

   一致，此时 会自动等比例缩放到这个高度

3. 让 float: left，此时 就会脱离布局
4. 给

   设置 padding-left，并大于 的宽度， 就会出现在

   的左边，两者重叠

5. 最好在父元素 div 上添加一个 clearfix 抵消掉上面 float 产生的副效果

完美