Question

我对编码非常陌生，需要一些使用CSS进行图像对齐的帮助。程序需要拍照并且每次拍照时，需要在图片中添加图片的缩略图。使用＆＃39;保证金：自动＆＃39;每次添加图片时，我都能让它们保持居中。但是我需要让每个缩略图尽可能保持居中，消除排队时出现的大间隙。

我希望让图片更加集中于中心，这样他们就不会有很大的差距

Third image added

编辑：这是HTML代码

-Wno-foobar

这是CSS代码：

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

Answer 1

您可以使用弹性容器来实现居中的项目集合。 java.io.IOException: Cannot run program "tesseract": error=2, No such file or directory在容器上，display: flex;使灵活项目居中。

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

justify-content; center

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

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

1 个答案: