在小程序中将多个view居中显示

来源：互联网发布：php 子类重写父类属性编辑：程序博客网时间：2024/06/05 13:23

我们在这里要实现的效果是这样的，在小程序中将多个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 0