css flex布局两个元素水平居中垂直居中

文章目录

问题描述

大家好!今天是2024年4月23日|农历三月十五,马上就快到五一假期啦,今天这博文主要以使用flex布局,让两个元素水平居中垂直居中,具体实现效果如下:

让图片和文字描述水平居中、垂直居中显示

解决方案

现在我是一行显示3个,下面是代码实现:

java 复制代码
<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样式

java 复制代码
.thumb-box {
	width: 33.333333%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin-top: 20rpx;
	border: 1px solid red;
}

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

相关推荐
Mintopia2 分钟前
🤖 算法偏见修正:WebAI模型的公平性优化技术
前端·javascript·aigc
Mintopia5 分钟前
🧩 TypeScript防御性编程:让Bug无处遁形的艺术
前端·typescript·函数式编程
JarvanMo7 分钟前
🔔 Flutter 本地通知: 吸引用户的完整指南—即使在他们离线时也能实现
前端
你想考研啊13 分钟前
一、redis安装(单机)和使用
前端·数据库·redis
江城开朗的豌豆15 分钟前
小程序与H5的“握手言和”:无缝嵌入与双向通信实战
前端·javascript·微信小程序
天蓝色的鱼鱼15 分钟前
React 19 发布一年后:对比 React 18,带来了哪些惊喜与变革
前端·react.js
你的电影很有趣19 分钟前
lesson73:Vue渐进式框架的进化之路——组合式API、选项式对比与响应式新范式
javascript·vue.js
江城开朗的豌豆20 分钟前
小程序静默更新?用户却无感?一招教你“强提醒”
前端·javascript·微信小程序
小张成长计划..21 分钟前
VUE工程化开发模式
前端·javascript·vue.js
_oP_i31 分钟前
dify之Web 前端工作流编排(Workflow Builder)
前端·dify