昆山做网站的/seo网站优化服务

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

index.wxml

<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

.user-text {padding: 10% 0%;
}.user-navigator {display:flex;flex-direction: column;align-items: center;
}

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

一、水平居中

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

二、垂直居中

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

三、中心居中

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