解决 vant-icon 不居中问题

前言

最近在小程序使用 vant-icon 出现了一个很 zz 得问题，这组件居然不能居中，如下图：

这里我写了一个和 vant-icon 同等大小得 view，并让这 view 和 vant-icon 背景显示为红色，很明显就是 vant-icon 不能居中，那用起来就很头疼。

下面是我用的代码：

• wxml

<view class="date row-center">
	<view style="height:36rpx;width:36rpx;background-color:red"></view>
	<van-icon name="arrow-left" size='36rpx'></van-icon>
	<view class="flex1 sub-title">
		<view class="center">{{currentPath}}</view>
	</view>
	<van-icon name="arrow" size='36rpx'></van-icon>
</view>

• wxss

.van-icon{
  background-color: red;
}

.row-center{
  display:flex; 
  flex-direction:row;
  align-items: center;
}

解决办法

还是看到网上一个老哥说的，给 vant-icon 加上一个垂直偏移：

.van-icon{
  background-color: red;
  vertical-align: -12%
}

我看了看源码，也没发现有加什么偏移，很奇怪啊。那老哥给的 -10%，我改成 -12% 后才对齐了，如下图：

可以得话把 van-icon 得垂直偏移加到 app.wxss 中去，但是也不是万能的办法，这个和 icon 的宽高有关，如果 icon 的宽高不改的话还是可以的。

结语

限制性比较大，上一个小程序我直接没用它，如果 icon 大小改变的不多的话，凑合用吧！