小程序解决icon图片与文字不居中问题

在项目中其实这种小问题很常见，那就是图片和文字不是自己想要的那种居中效果，经常一上一下的很难看，这当然是不行的了，所以该怎么解决呢？使用flex布局可以解决这个问题。关键就在 align-items: center
1.wxml:

 <!-- 投票 -->
    <view class="vote" style="background:pink">
      <view class="icon"><image src="../../img/vote.png"></image></view> 
      <view class="text">投票</view>
    </view>

2.wxss:

/* 投票 */
.vote{
  height: 50rpx;
  margin-top: 2%;
  display: flex;
  align-items: center
}
.vote .icon>image{
    width: 32rpx;
    height: 32rpx; 
}
.vote>.text{
   margin-left: 3%;
   font-size: 30rpx;
   color: #333;
}

效果如图所示：

总结：
align-items:center 整体子元素垂直居中（也可以使用margin或padding或定位来实现）