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

七夜zippoe2024-10-31 8:30

最近在做一个微信小程序的项目，其中涉及到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;
}