商城系統(tǒng) 注冊(cè)

小程序view居中顯示效果怎么設(shè)置

2018-03-19|HiShop
導(dǎo)讀:很多在開發(fā)小程序時(shí),會(huì)需要將多個(gè)view居中顯示的效果,那么要如何設(shè)置,怎么實(shí)現(xiàn)呢?...


  很多在開發(fā)小程序時(shí),會(huì)需要將多個(gè)view居中顯示的效果,那么要如何設(shè)置,怎么實(shí)現(xiàn)呢?
  小程序view居中顯示效果是這樣的:

小程序view居中顯示效果怎么設(shè)置

  如下圖效果所示:我們需要將 “延長(zhǎng)收貨”,”查看物流”,“提醒發(fā)貨”,“提醒發(fā)貨”是四個(gè)按鈕放在頁(yè)面最中間,并且間隔適當(dāng)?shù)木嚯x:

HTML代碼:

  <view class="footer">
            <view class="footer-btn" style="display:flex;flex-direction: row;">
                <view class="footer-btn1">延長(zhǎng)收貨</view>
                <view class="footer-btn2">查看物流</view>
                <view class="footer-btn3">提醒發(fā)貨</view>
                <view class="footer-btn4">提醒發(fā)貨</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;
}

電話咨詢 預(yù)約演示 0元開店