微信小程序图片下边加文字组合

图片下边加文字组合

简介

我们在开发程序的时候，很大情况会用到图片下边加文字的组合，因为好看又实用，所以在此记录一下给大家。

效果图

代码

wxml

<view class="view_saoyisao">
  <image class="image_saoyisao" src="../images/main_yewu.png"></image>
  <text class="text_saoyisao">扫一扫</text>
</view>

wxss

.view_saoyisao {
  display: flex;
  flex-direction: column;
  width: 60px;
  align-items: center;
}

.image_saoyisao {
  display: flex;
  width: 40px;
  height: 40px;
}