问题描述

大家好！今天是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;
}

如果有遇到和我相同问题的博主，可以参考一下这种解决方案，如果没能解决可以私信我哦！