问题描述
大家好!今天是
2024年4月23日|农历三月十五
,马上就快到五一假期啦,今天这博文主要以使用flex布局,让两个元素水平居中垂直居中,具体实现效果如下:
让图片和文字描述水平居中、垂直居中显示
解决方案
现在我是一行显示3个,下面是代码实现:
<view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1" @click="jumpPage(item1.id)"> <image referrerPolicy='no-referrer' class="item-menu-image" :src="item1.icon" mode=""></image> <view class="item-menu-name">{{item1.name}}</view> </view>
css样式
.thumb-box { width: 33.333333%; display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 20rpx; border: 1px solid red; }
如果有遇到和我相同问题的博主,可以参考一下这种解决方案,如果没能解决可以私信我哦!