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

  • 相关阅读:
    delphi 对TThread扩充TSimpleThread
    delphi 关于命名
    Delphi 实现Ini文件参数与TEdit和TCheckBox绑定(TSimpleParam)
    delphi 操作 TWebBrowser 实现自动填表(JQuery脚本与 OleVariant 方法)
    delphi idhttp 实战用法(TIdhttpEx)
    每周总结(10)
    每周总结(9)(补)
    每周总结(8)
    《大话设计模式》读书笔记(四)
    《大话设计模式》读书笔记(三)
  • 原文地址:https://www.cnblogs.com/shark1100913/p/8522716.html
Copyright © 2011-2022 走看看