flex 布局

<view style='display:flex'>
  <view style='display:flex;flex:1;flex-direction:column;align-items:stretch;'>
    <view class=''>小计:<text style='color:#ff0000'>¥{{ sum - promTotal }}</text></view>
    <view style='display:flex;'>
      <view style='margin-right:30rpx;'>总额:¥{{ sum }}</view>
      <view style='flex:1;'>优惠:-¥{{ promTotal }}</view>
    </view>
  </view>
  <view style='background-color:#ff0000;align-items:stretch' bindtap='placeAnOrder'>去下单</view>
</view>

clipboard.png

在现有样式下,如何让图片上的 “去下单” 垂直居中 ?

阅读 533
评论
    3 个回答
    • 4.6k

    把“去下单”再包一层flex容器,align-items:center"控制垂直居中

    ...
    
    <view style="display:flex; align-items:center">
      <view style='background-color:#ff0000;' bindtap='placeAnOrder'>去下单</view>
    </view>

    flex布局参考:http://www.ruanyifeng.com/blo...

      相似问题
      推荐文章