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

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

相关推荐
10年前端老司机4 分钟前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星4 分钟前
vue实现微信聊天emoji表情
前端·javascript
停止重构6 分钟前
【方案】前端UI布局的绝技,响应式布局,多端适配
前端·网页布局·响应式布局·grid布局·网页适配多端
極光未晚7 分钟前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
ze_juejin8 分钟前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js
Rrvive9 分钟前
原型与原型链到底是什么?
javascript
lichenyang45310 分钟前
React项目(移动app)
前端
用户618482402195111 分钟前
Vue-library-start,一个基于Vite的vue组件库开发模板
前端
美团技术团队22 分钟前
报名 | 美团技术沙龙第86期:多业务场景下,美团如何做性能优化
前端
Rrvive1 小时前
localhost 和 127.0.0.1 的核心区别
前端