html - 在 css 网格中图像的一 Angular 显示关闭 (X) 按钮

Question

我在响应式 CSS 网格中有不同大小和 x/y 比率的图像。 我需要在每张图片的右上角有一个 ✖️ 按钮。 所以在每个网格单元格中我放了一个表格，在表格里面 - 一个按钮和一个图像:

<form action="/destroyImage" method="POST">
  <button type="submit" class="close">
    <span>&times;</span>
  </button>
  <img src="/pub/myimage123.jpg"/>
</form>

问题:

1. 如何将按钮的中心放在图片的一 Angular ？
2. 如何获得更好看的 ✖️ 按钮(我使用 Bootstrap 4)？

Answer 1

要在右上角获得“X”，您可以这样做:

.AClass{
    right:0px;
    position: absolute;
}

<form action="/destroyImage" method="POST">
    <div style="position:relative;">
        <button type="submit" class="close AClass">
           <span>&times;</span>
        </button>
        <img src="/pub/myimage123.jpg"/>
    </div>
</form>

为了获得更好的交叉，我建议使用 Font Awesome 或它的一些变体。