图标文字居中排放

<!--图标文字居中排放-->
       <div style="margin-top:20px;">
           <i></i> <span>伤心</span>
       </div>

 /*图标文字居中排放*/
      i{
          background:url("sad.png");
          background-size: 18px 18px;
        width:18px;
        height:18px;
        display:inline-block;
        vertical-align: middle;
    }
    span{
        display: inline-block;
        vertical-align: middle;
        height:24px;
        line-height: 24px;
    }