将响应式卡片图像中的图标或按钮居中答案

【问题标题】：Centering an icon or button inside a responsive card image将响应式卡片图像中的图标或按钮居中
【发布时间】：2020-10-19 00:34:42
【问题描述】：

我有这张卡片，我正在页面中显示。我希望按钮或图标出现在页面中间，并且在调整窗口大小时也应该响应不要停留在同一位置。这是目前为止的代码

  <div class="col-md-3 search_result">
      <div class="col text-center">
      <button>
     Play Icon
      </button>
       </div>
        <div class="card cw">
          <img class="card-img-top" src="https://picsum.photos/534/313" alt="Card image cap">
          <div class="card-footer"><span class=""></span> <a class="sr_fl" href="">Image of the pillar</a><br/>
          <span class="badge badge-red">Source:</span><a href="">Pillar.com</a>
          </div>
        </div>
      </div>

这是https://jsfiddle.net/s8b0djc1/1/的结果

如何将按钮或任何元素置于卡片图像的中心？

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

我不确定你想要什么，也没有关于你使用的类的信息（即使我认为它是 boostrap）。这是一个可以启发您如何操作的代码。

.card {
  position: relative;
  width: max-content;
}
.card button {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transforme: translate(-50%, -50%);
}

<div class="col-md-3 search_result">
    <div class="card cw">
        <button></button>
        <img class="card-img-top" src="https://picsum.photos/534/313" alt="Card image cap">
        <aside class="card-footer"><span class=""></span> <a class="sr_fl" href="">Image of the pillar</a><br />
            <span class="badge badge-red">Source:</span><a href="">Pillar.com</a>
        </aside>
    </div>
</div>

【讨论】：

我正在尝试在卡片图像顶部放置一个视频播放按钮。您拥有的代码仅适用于按钮，但不适用于 fontawesome 图标<i class="fas fa-play"></i>
在您的第一个请求中，您只说按钮而不是文本元素，而且我不明白您为什么使用空的斜体文本标签。 Aurais-tu une image de ce que tu souhaite pour que je cerne mieux ton problème afin de t'aider.
La réponse que vous avez donnée répond à la question, mais naturellement c'est l'icône qui vient au centre。 Je l'accepterai。