小程序 view居中、居右、显示在屏幕底部

一、居中

  1. 父布局设置属性,子布局居中
    在这里插入图片描述
  display:flex;
  justify-content:center;

在父布局css里加上以上属性,子view显示就会居中。

  1. view单独设置属性居中
    在这里插入图片描述
    在这里让 绿色按键居中。
 <image  style='width:300px;height:40px; display: flex;justify-content: center;margin: 0 auto;' src='../../images/icon_click_enter.png'></image>

给view加上display: flex;justify-content: center;margin: 0 auto;即可

二、居右
在这里插入图片描述

.er-img{
  width: 25px;
  height: 25px;
  display: inline;
  float: right;
  padding-top: 30px;
  padding-right: 30px;
}

关键属性display: inline;float: right;,另外,这个控件会把人物头像的布局挤的向左偏移,我的解决办法是,让头像布局margin-left: 70px;相当于手动把屏幕的宽度两边各去掉一同等部分,以至于居中属性依旧能用。

三、显示在屏幕底部

//给该view设置这俩属性
position:fixed; 
bottom:0; 
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值