微信小程序元素水平居中或垂直居中

最近在做一个微信小程序的项目,其中涉及到css样式实现将<navigator>标签内的图片和文本元素垂直排列,并水平居中。在尝试实现的过程中,将元素在标签内的所有排列情况都顺带实现了。上代码:

index.wxml

javascript 复制代码
<navigator url="/pages/user/user-collect/index" hover-class="none" class="user-navigator">
    <image class="order-image" src="/public/img/5-8.png"></image>
    <text class="text-black user-text">收藏</text>
</navigator>

index.wxss

javascript 复制代码
.user-text {
  padding: 10% 0%;
}

.user-navigator {
  display:flex;flex-direction: column;align-items: center;
}

顺带实现的其他排列情况index.wxss文件中的对用内容如下:

一、水平居中

javascript 复制代码
1、排列方向为水平方向
.user-navigator{
  display: flex;
  align-items: center;
}
2、排列方向为竖直方向
.user-navigator{
  display: flex;
  flex-direction: column;
  align-items: center;
}

二、垂直居中

javascript 复制代码
1、排列方向为水平方向
.user-navigator{
  display: flex;
  flex-direction:column;
  justify-content: center;
}
2、排列方向为竖直方向
.user-navigator{
  display: flex;
 justify-content: center;
}

三、中心居中

javascript 复制代码
1、排列方向为水平方向
.user-navigator{
  display: flex;
  align-items: center;
  justify-content: center;
}
2、排列方向为竖直方向
.user-navigator{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
相关推荐
Nan_Shu_6149 小时前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
尘似鹤10 小时前
微信小程序学习(三)补充
学习·微信小程序
老华带你飞11 小时前
机电公司管理小程序|基于微信小程序的机电公司管理小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·微信小程序·小程序·机电公司管理小程序
涛声依旧12 小时前
基于springBoot鲜花商城小程序
java·spring·微信小程序
卷Java14 小时前
小程序前端功能更新说明
java·前端·spring boot·微信小程序·小程序·uni-app
卷Java14 小时前
小程序原生导航栏返回键实现
spring boot·云原生·微信小程序·uni-app
CTRA王大大14 小时前
【微信公众平台】小程序如何查找菜单?如何通过自定义的菜单路径生成小程序二维码?小程序二维码指定生成
小程序·微信公众平台
说私域14 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的引流爆款设计策略研究
人工智能·小程序
weixin_lynhgworld14 小时前
短剧小程序系统开发:构建便捷高效的影视观看平台
小程序·短剧
知识分享小能手14 小时前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(下)——知识点详解 + 案例实战(5)
前端·javascript·学习·微信小程序·小程序·vue·前端开发