微信小程序中将多个view居中显示的方法

前端之家收集整理的这篇文章主要介绍了微信小程序中将多个view居中显示的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Box-sizing: border-Box; color: rgb(79, 79, 79); line-height: 26px; text-align: justify; word-wrap: break-word; word-break: normal; text-indent: 0px; white-space: normal;">我们在这里要实现的效果是这样的,在小程序中将多个view居中显示 
Box-sizing: border-Box;"/>先看一下效果


Box-sizing: border-Box; margin: 24px 0px; border-right: none; border-bottom-style: solid; border-bottom-color: rgb(221, 221, 221); border-left: none; border-image: initial; border-top: none; color: rgb(63, 63, 63); white-space: normal;"/>

Box-sizing: border-Box; color: rgb(79, 79, 79); line-height: 26px; text-align: justify; word-wrap: break-word; word-break: normal; text-indent: 0px; white-space: normal;">

这里写<a href=图片描述" title="" style="border: none; Box-sizing: border-Box; margin: 24px 0px; max-width: 602px; max-height: 100%; height: auto;"/>


Box-sizing: border-Box; margin: 24px 0px; border-right: none; border-bottom-style: solid; border-bottom-color: rgb(221, 221, 221); border-left: none; border-image: initial; border-top: none; color: rgb(63, 63, 63); white-space: normal;"/>

Box-sizing: border-Box; color: rgb(79, 79, 79); line-height: 26px; text-align: justify; word-wrap: break-word; word-break: normal; text-indent: 0px; white-space: normal;">如下图效果所示:我们需要将 “延长收货”,”查看物流”,“提醒发货”,“提醒发货”是四个按钮放在页面最中间,并且间隔适当的距离:


Box-sizing: border-Box; margin: 24px 0px; border-right: none; border-bottom-style: solid; border-bottom-color: rgb(221, 221, 221); border-left: none; border-image: initial; border-top: none; color: rgb(63, 63, 63); white-space: normal;"/>

Box-sizing: border-Box; color: rgb(79, 79, 79); line-height: 26px; text-align: justify; word-wrap: break-word; word-break: normal; text-indent: 0px; white-space: normal;">

这里写<a href=图片描述" title="" style="border: none; Box-sizing: border-Box; margin: 24px 0px; max-width: 602px; max-height: 100%; height: auto;"/>


Box-sizing: border-Box; margin: 24px 0px; border-right: none; border-bottom-style: solid; border-bottom-color: rgb(221, 221, 221); border-left: none; border-image: initial; border-top: none; color: rgb(63, 63, 63); white-space: normal;"/>

Box-sizing: border-Box; line-height: 30px; color: rgb(79, 79, 79); white-space: normal;">HTML代码

  1. 延长收货
  2. 查看物流
  3. 提醒发货
  4. 提醒发货

Box-sizing: border-Box; line-height: 30px; color: rgb(79, 79, 79); white-space: normal;">CSS代码

  1. 底部按钮*/
  2.  
  3. .footer{
  4. padding-bottom: 6px;
  5. }
  6. .footer-btn{
  7. justify-content: space-around;
  8. }
  9. .footer-btn1,.footer-btn2,.footer-btn3,.footer-btn4{
  10. font-size: 28rpx;
  11. color: #666666;
  12. border: 2rpx solid #999999;
  13. border-radius: 8rpx;
  14. line-height: 44rpx;
  15. margin-top: 8px;
  16. padding:4px 4px;
  17. }

猜你在找的微信小程序相关文章