html5模板网站,上海网架公司,精品源码分享免费下载,jsp网站开发实例视频教程最近在做一个微信小程序的项目#xff0c;其中涉及到css样式实现将navigator标签内的图片和文本元素垂直排列#xff0c;并水平居中。在尝试实现的过程中#xff0c;将元素在标签内的所有排列情况都顺带实现了。上代码#xff1a;
index.wxml
navigator url其中涉及到css样式实现将navigator标签内的图片和文本元素垂直排列并水平居中。在尝试实现的过程中将元素在标签内的所有排列情况都顺带实现了。上代码
index.wxml
navigator url/pages/user/user-collect/index hover-classnone classuser-navigatorimage classorder-image src/public/img/5-8.png/imagetext classtext-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;
}
