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; 
    }

  • 相关阅读:
    南京周边城市两日游方案
    电梯演说
    需求分析
    敏捷开发
    课堂练习 选择团队类型
    结对项目小DEMO
    分析图书管理系统的5W1H
    项目风险分析作业
    旅游方案选择
    图书管理系统需求规格
  • 原文地址:https://www.cnblogs.com/shark1100913/p/8522716.html
Copyright © 2011-2022 走看看