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

  • 相关阅读:
    再谈后兵 FileInfo 与 DirectoryInfo类 清晰的winform界面(技术改变世界cnblog)
    在.NET Core中使用Channel(二)
    C#中的依赖注入和IoC容器
    改进你的c#代码的5个技巧(一)
    将WCF迁移到gRPC
    在.NET Core中使用Channel(三)
    在.NET Core中使用Channel(一)
    .NET 5 源代码生成器——MediatR——CQRS
    在大型软件项目中如何处理错误和异常
    在 ASP.NET Core和Worker Service中使用Quartz.Net
  • 原文地址:https://www.cnblogs.com/shark1100913/p/8522716.html
Copyright © 2011-2022 走看看