100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 微信小程序垂直横向居中对齐布局

微信小程序垂直横向居中对齐布局

时间:2023-11-15 00:53:35

相关推荐

微信小程序垂直横向居中对齐布局

多个文本垂直居中对齐

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; //让内容保持间隙

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。