html - 如何为上角的上传图像添加删除图标

Question

  <div *ngFor="let selected of base64textString;let index = index">
      <img [src]="selected.imageString" style="height: 100px; width:100px;">
      <i class="ft-trash-2 danger cursor-pointer" (click)="delete(item)"></i>
    </div>

如何在右上角添加删除上传图片的图标。我无法正确放置..请您建议正确对齐图标，好吗？

标签： htmlcssangularbootstrap-4

Answer 1

你可以很容易地使用 Flexbox 来解决这个问题试试这个

.div-image{
    display: flex;
    flex-direction: column;
    justify-content: center;
    
}
.div> i{
    align-self: flex-end;
    font-size:1rem;
}

<div
      class="div-image"
      *ngFor="let selected of base64textString;let index = index"
    >
      <i
        class="ft-trash-2 danger cursor-pointer div-icon"
        (click)="delete(item)"
      ></i>
      <img [src]="selected.imageString" style="height: 100px; width: 100px" />
    </div>