在css网格中的图像角落显示关闭（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. 如何将按钮的中心放在图像的角落？
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 或它的一些变体。