1、子控件基于父控件垂直居中
这个百度各有各说法,这是我常用的
.father{
display: flex;
}
.son{
margin-top: auto;
margin-bottom: auto;
}
2、文字居中或者居右
wxss
.left_text{
width: 100%;
margin-top: auto;
margin-bottom: auto;
}
.right_text{
width: 100%;
text-align: right;
margin-top: auto;
margin-bottom: auto;
}
这个可以实现这个效果

3、快速分割线
在view的样式中添加以下就可以快速实现上分割线或者下分割线
/**上分割线**/
border-top: #EFEFEF solid 1rpx;
/**下分割线**/
border-bottom: #EFEFEF solid 1rpx;
4、子控件快速基于父控件居右对齐
/**父控件**/
.view1{
display: flex;
width:100%;
}
.view1_1{
margin-left: auto;
}
可以实现这个效果

未完待续………………
本文分享了多种CSS布局技巧,包括子控件垂直居中、文字水平居中与居右、快速分割线及子控件居右对齐的方法,助力前端开发者高效完成页面布局。
1万+

被折叠的 条评论
为什么被折叠?



