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;
}

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

相关推荐
顺丰同城前端技术团队9 分钟前
DeepSeek 国产大模型新标杆
前端·后端·程序员
Java水解10 分钟前
微前端架构:从单体到模块化的前端新革命
前端
Mr_汪13 分钟前
uniapp使用h5的map(已弃用)
前端
前端进阶者16 分钟前
vite调试node_modules下面插件
前端·vite
YaHuiLiang24 分钟前
小微互联网公司与互联网创业公司 -- 学历之殇
前端·后端·面试
用户261245834016126 分钟前
vue学习路线(11.watch对比computed)
前端·vue.js
CAD老兵32 分钟前
前端 Source Map 原理与结构详解
前端
gnip36 分钟前
markdown预览自定义扩展实现
前端·javascript
大猫会长1 小时前
mac中创建 .command 文件,执行node服务
前端·chrome
旧时光_1 小时前
Zustand 状态管理库完全指南 - 进阶篇
前端·react.js