多个文本垂直居中对齐
display: flex;//布局横向
justify-content: center;//纵向居中
align-items: center;//横向居中
flex-direction: column;//纵向排列
text-align: center; //文本居中对齐
margin: 10px 0; //上下10px,左右0px
width: 100%; //横向占满宽度
position: fixed; //固定位置
toFixed(2) //保留两位小数
height: 100vh;/* 100vh占满空间 */
flex: 1;/*占满空间 */
overflow-y: auto;/* 超出隐藏*/
多个文本横向对齐
display: flex;
justify-content: space-around;//布局贴边
单文本对齐方式
display: flex;
flex-direction: column; //纵向排列
align-items: center;//横向居中
justify-content: space-around;//分散对齐
.panel-title {
line-height: 45px;//行高
padding-left: 10px;//左间距
font-size: 15px;//字体大小
border-bottom: 1x solid #F4F4F4;//底部分隔线
}
.panel-list-item{
display: flex;
justify-content: space-between;
align-items: center;//纵向上居中对齐
font-size: 15px; //字体15像素
padding: 0 10px;//上下0 左右10px
line-height: 45px;//行高
}
.history-title {
display: flex; //左右对齐
justify-content: space-between; //靠边对齐
align-items: center;
height: 40px;
font-size: 13px;
border-bottom: 1px solid #efefef; //添加一个像素的下划线
display: block; //让内容保持间隙
}
如果觉得《微信小程序垂直横向居中对齐布局》对你有帮助,请点赞、收藏,并留下你的观点哦!