zoukankan      html  css  js  c++  java
  • 让容器中的多个图片居中显示

    //test.xml
    <view class='top'>
      <view class='text'>本次拼团</view>
      <view class='text'>剩余22:22:22,剩余1人</view>
      <view class='pics'>
        <view>
          <image src='https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2541195983,2321083154&fm=173&s=B39735C81E03045106F924040300C0C6&w=218&h=146&img.JPEG'></image>
        </view>
        <view>
          <image src='https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2541195983,2321083154&fm=173&s=B39735C81E03045106F924040300C0C6&w=218&h=146&img.JPEG'></image>
        </view>
        <view>
          <image src='https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2541195983,2321083154&fm=173&s=B39735C81E03045106F924040300C0C6&w=218&h=146&img.JPEG'></image>
        </view>
        <view>
          <image src='https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2541195983,2321083154&fm=173&s=B39735C81E03045106F924040300C0C6&w=218&h=146&img.JPEG'></image>
        </view>
        <view>
          <image src='https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2541195983,2321083154&fm=173&s=B39735C81E03045106F924040300C0C6&w=218&h=146&img.JPEG'></image>
        </view>
        <view>
          <image src='https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2541195983,2321083154&fm=173&s=B39735C81E03045106F924040300C0C6&w=218&h=146&img.JPEG'></image>
        </view>
        <view>
          <image src='https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2541195983,2321083154&fm=173&s=B39735C81E03045106F924040300C0C6&w=218&h=146&img.JPEG'></image>
        </view>
        <view>
          <image src='https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2541195983,2321083154&fm=173&s=B39735C81E03045106F924040300C0C6&w=218&h=146&img.JPEG'></image>
        </view>
        <view>
          <image src='https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2541195983,2321083154&fm=173&s=B39735C81E03045106F924040300C0C6&w=218&h=146&img.JPEG'></image>
        </view>
        
      </view>
      <view></view>
    </view>
    //test.css
    .pics{
      margin-top: 80rpx;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
    .pics view{
      width: 130rpx;
      text-align: center;
      margin-top: 15rpx;
    }
    .pics image{
      width: 100rpx;
      height: 100rpx;
      border-radius:50rpx; 
    }

  • 相关阅读:
    laydate 监听日期切换
    done
    Could not find result map java.util.HashMap
    toFixed
    js追加元素
    input只能输入数字或两位小数
    JSTree[树形控件]
    JSp获取到当前用户的全部session
    layui select change
    大型网站技术架构读后感
  • 原文地址:https://www.cnblogs.com/shark1100913/p/8522716.html
Copyright © 2011-2022 走看看