商城系统 注册

小程序view居中显示效果怎么设置

2018-03-19|HiShop
导读:很多在开发小程序时,会需要将多个view居中显示的效果,那么要如何设置,怎么实现呢?...


  很多在开发小程序时,会需要将多个view居中显示的效果,那么要如何设置,怎么实现呢?
  小程序view居中显示效果是这样的:

小程序view居中显示效果怎么设置

  如下图效果所示:我们需要将 “延长收货”,”查看物流”,“提醒发货”,“提醒发货”是四个按钮放在页面最中间,并且间隔适当的距离:

HTML代码:

  <view class="footer">
            <view class="footer-btn" style="display:flex;flex-direction: row;">
                <view class="footer-btn1">延长收货</view>
                <view class="footer-btn2">查看物流</view>
                <view class="footer-btn3">提醒发货</view>
                <view class="footer-btn4">提醒发货</view>
            </view>
    </view>

CSS代码:

/*底部按钮*/

.footer{
  padding-bottom: 6px;
}
.footer-btn{
  justify-content: space-around;
}
.footer-btn1,.footer-btn2,.footer-btn3,.footer-btn4{
  font-size: 28rpx;
  color: #666666;
  border: 2rpx solid #999999;
  border-radius: 8rpx;
  line-height: 44rpx;
  margin-top: 8px;
  padding:4px 4px;
}

电话咨询 预约演示 0元开店