Question

我有一张图片，想要在该图片的中心使用字体真棒圆圈图标。我可以这样做吗？

WORD WORD GREAT WORD

我想在图像中间做这个播放字体图标，这样我该怎么办？我也尝试过css

<div class="poster">
  <img src="img/6.jpg">
  <div id="font">
    <i class="far fa-play-circle fa-5x"></i>
  </div>
</div>

Answer 1

您可以使用flexbox将div中的所有内容置于中心位置。然后将position: absolute应用于您的图标，将其放置在图片顶部。

＆＃13;

.poster {
  /*margin-left: 100px;
  margin-top: -250px;*/
  border: 12px solid red;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  display: block;
  max-width: 100%;
}

.poster #font {
  position: absolute;
}

＆＃13;

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="poster">
  <img src="https://unsplash.it/200">
  <span id="font">
    <i class="far fa-play-circle fa-5x"></i>
  </span>
</div>

＆＃13;

使用CSS在图像上对div进行绝对居中

1 个答案: