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

最近在做一个微信小程序的项目,其中涉及到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;
}
相关推荐
2501_916008897 小时前
Web 前端开发常用工具推荐与团队实践分享
android·前端·ios·小程序·uni-app·iphone·webview
2501_915921437 小时前
“HTTPS 个人化”实战,个人站点与设备调试的部署、验证与抓包排查方法
网络协议·http·ios·小程序·https·uni-app·iphone
菜鸟una8 小时前
【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)
前端·vue.js·微信小程序·小程序·typescript·taro·1024程序员节
韩立学长9 小时前
【开题答辩实录分享】以《租房小程序的设计和实现》为例进行答辩实录分享
java·spring boot·小程序
從南走到北9 小时前
JAVA国际版一对一视频交友视频聊天系统源码支持H5 + APP
java·微信·微信小程序·小程序·音视频·交友
future_studio10 小时前
聊聊 Unity(小白专享、C# 小程序 之 联机对战)
unity·小程序·c#
隔壁程序员老王10 小时前
基于 Python 的坦克大战小程序,使用 Pygame 库开发
python·小程序·pygame·1024程序员节
從南走到北10 小时前
同城派送小程序
微信·微信小程序·小程序
腾讯云云开发12 小时前
3小时上线!云开发“零运维”外卖小程序指南
微信小程序·ai编程·小程序·云开发
腾讯云云开发12 小时前
云开发1天极速开店!1人搞定全流程
微信小程序·ai编程·小程序·云开发