在Ionic项目中添加CSS新图片时保持图像为中心

Question

我对编码很新，需要一些使用CSS进行图像对齐的帮助。程序需要拍照并且每次拍照时，需要在图片中添加图片的缩略图。使用'margin：auto'我可以让它们在每次添加图片时保持居中。但是我需要让每个缩略图尽可能保持居中，消除排队时出现的大间隙。

Screenshot of CSS

Screenshot of HTML

When no pictures have been added yet

First image added

Second image added

我希望保持图像更加集中，这样它们之间就没有很大差距

Third image added

编辑：这是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来固定弹性物品。

在这里阅读更多关于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>