最近項目中使用到了在表格中顯示文字前面附加一個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;
}
/*子元素就設好寬高*/