关于icon和文字对齐方式

以小程序为例

wxml如下

<view class="content">
  <image class="img" src="./赞-选中.png"></image>
  <text class="text">点赞点赞</text>
</view>

wxss可以利用flex对齐（文本是否包裹都可以）

.img {
  width: 60rpx;
  height: 60rpx;
  margin-right: 6rpx;
}
.content {
  display: flex;
  align-items: center;
}

还有其他类似方式，和第一种其实一样的（文本包不包裹效果几乎没差别）：

.img {
  width: 60rpx;
  height: 60rpx;
  margin-right: 6rpx;
}
.content {
  display: inline-flex;
  align-items: center;
}

第三种方式直接给图片设置 display: inline-block; vertical-align: middle;效果貌似比前面两种要好，如果文本未用其它标签包裹会造成文本离开baseline的基线

.img {
  width: 60rpx;
  height: 60rpx;
  margin-right: 6rpx;
  display: inline-block;
  vertical-align: middle;
}

以上几种情况最常见，也基本够用

仅限个人理解和实践结论，不喜勿喷，希望有用！

参考文章：https://juejin.cn/post/6844903693406437384