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

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

阅读 546
评论
    3 个回答

    以下代码和提问代码有些许不同,但解决思路是一样的

    <view style="background-color:#fff;margin-bottom:18rpx;padding-left:30rpx;">
      <view style='display:flex;align-item:center;background-color:#ff0000;'> //背景设为红色
        <view style='display:flex;flex:1;flex-direction:column;background-color:#fff;padding:26rpx 0;'> // 左侧背景设为白色,挡住左边的父元素设置的红色背景
          <view style="color:#232326;">实付:<text style="color:#d4372f;">¥4450.00</text></view>
          <view style="font-size:28rpx;color:#848689;" wx:if="{{true}}">累计节省:¥1030</view>
        </view>
        <view style="width:232rpx;text-align:center;color:#fff;">提交订单</view>// 右边不用设背景,直接显示的就是父元素的红色背景
      </view>
    </view>
    
    
    

    clipboard.png

      • 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...

        line-height虽然能解决你的部分问题,但是他会局限你的适配方案,目前不知道你的适配方案,所以只能给出次回答。

          撰写回答

          登录后参与交流、获取后续更新提醒

          相似问题
          推荐文章