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

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

相关推荐
拜无忧2 分钟前
【小游戏】逃逸小球h5,登录背景,缺口逃逸小球多边形
前端
烛阴4 分钟前
Python 列表推导式:让你的代码更优雅、更高效
前端·python
文心快码BaiduComate4 分钟前
开工不累,双强护航:文心快码接入 DeepSeek-V3.2-Exp和 GLM-4.6,助你节后高效Coding
前端·人工智能·后端
快乐是一切7 分钟前
PDF底层格式之水印解析与去除机制分析
前端·数据结构
麋鹿原9 分钟前
Android Room 数据库之简单上手
前端·kotlin
一小池勺15 分钟前
改变上下文的 API:call, apply, bind
前端·javascript
三门27 分钟前
vue官网新读之后收获记录
前端
Keepreal49634 分钟前
使用Canvas绘制转盘
javascript·vue.js·canvas
mapbar_front40 分钟前
我们需要前端架构师这个职位吗?
前端
ScriptBIN1 小时前
Javaweb--Vue
前端·vue.js