网页小图标和文字混排时如何对齐基准线

最近项目中使用到了在表格中显示文字前面附加一个icon

但是在html中，并列的图片和文字在页面显示的时候图片总是比文字靠上

此时需使用到了CSS vertical-align 属性 , 让文字和icon能在一条水平线上 .

实现效果：

img{
 /*vertical-align:text-top;  文字与图片对齐 */
  margin-bottom:-5px;/* 需要自己计算后对比效果 */
}

属性介绍

baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。

当然 我们属性的position和margin也是可以解决该问题的

另外转载 图片和文字垂直居中-flex布局

//html
<view class="father">
   <image class="heart left" src="../../../image/like.png"></image>
   <view class="text right">赞</view>
</view>

//css
.father{
      /*设好宽高*/
      width:140rpx;
      height:70rpx;

      display: flex;
      /*水平方向元素居中，两边留白*/
      justify-content:center;
      /*垂直方向元素居中，两边留白*/
      align-items: center;
}
/*子元素就设好宽高*/