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

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

浏览量:20623 时间: 来源:julystroy

一、居中

  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; 

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎