html - 在 Ionic 元素中使用 CSS 添加新图片时保持图像居中

Question

我是编码的新手，需要一些有关使用 CSS 对齐图像的帮助。程序需要拍照，每拍一张照片，需要在线添加一张图片的缩略图。使用“边距:自动”，每次添加图片时我都能让它们保持居中。但是，我需要让每个缩略图尽可能居中，消除它们排列时出现的大间隙。

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 使 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>