在离子项目中使用CSS添加新图片时将图像保持为中心

Question

我是编码的新手，需要使用CSS进行一些帮助。该程序需要拍照，每次拍照时，都需要在排队中添加图片的缩略图。使用" Margin：Auto"，每次添加图片时，我都可以让它们保持居中。但是，我需要将每个缩略图保持尽可能地居中，从而消除它们排队时发生的较大差距。

CSS

的屏幕截图

html的屏幕截图

尚未添加图片

第一个图像添加

添加了第二张图像

我想让图像更加集中，以便它们之间没有很大的差距

添加了第三张图像

编辑：这是HTML代码

<ion-content padding>
  <ul id="progressbar">
    <li class="active"></li>
    <li class="active"></li>
    <li class="active">Take Accident Photos</li>
    <li></li>
    <li></li>
  </ul>
  <h4>Vehicle I Photos</h4>
  <ion-buttons right>
    <button style="height:2.0em;" color="bground" ion-button icon-only (click)="getPicture()">
              <ion-icon  color="white" name="add"></ion-icon>
            </button>
  </ion-buttons>
  <ion-slides class="image-slider" loop="true" slidesPerView="5">
    <ion-slide *ngFor="let img of veh1Image">
      <img src="{{img}}" class="thumb-img" imageViewer/>
    </ion-slide>
  </ion-slides>

这是CSS代码：

page-take-photo {
    ion-card-header {
        background-color: #CCCCCC;
    }
    ion-card{
        height: 200px;
    }
    ion-scroll {
        height: 200px;
    }
ion-slide.swiper-slide {
    margin: auto;
    }
    .flex-container {
        display: flex;
        justify-content: center;
    }
    .slide-zoom {
        background: #e6e6e6;
    }
    .thumb-img {
        padding: 10px;
    }
    .image-slider{
        height: 200px !important;          
    }
}

Answer 1

您可以使用Flex容器来实现集中的项目集合。 display: flex;在容器上，用justify-content; center将flex项目集中。

在此处阅读有关Flexbox的更多信息：https：//css-tricks.com/snippets/css/a-guide-to-flexbox/

.flex-container {
    display: flex;
    justify-content: center;
}
.item {
    padding: 10px;
    margin: 2px;
    background: green;
}

<div class="flex-container">
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
</div>