css 将图标放置在居中图像的角落

cclgggtu 于 2023-05-02 发布在其他

关注(0)|答案(1)|浏览(138)

我使用flex在视口中居中显示一个图像：

<!-- This div simulates the viewport: -->
<div style="resize: both; overflow: auto; width: 192px; height: 108px;">
  <div style="background-color: #AAA; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center;">
    <img style="max-height: 100%; max-width: 100%;" src="https://placekitten.com/800/600">
  </div>
</div>

最外面的div表示视口，您可以调整其大小。
现在我想在图像的右上角显示一个图标（不是灰色区域）。
我可以用CSS做这个吗？

css

来源：https://stackoverflow.com/questions/76106814/place-icon-in-corner-of-centered-image

1条答案

按热度按时间

disho6za1#

你可以使用flex的属性，兄弟元素将相对于兄弟元素的位置。在此之后，用一点创造力，你可以创建一个0px的相对div作为你的绝对定位图标的锚，例如：

<!-- This div simulates the viewport: -->
<div style="resize: both; overflow: auto; width: 192px; height: 108px;">
  <div style="background-color: #AAA; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center;">
    <img style="max-height: 100%; max-width: 100%;" src="https://placekitten.com/800/600">
    <div style="position: relative; top: 0; align-self: flex-start">
      <div style="position: absolute; right: 0">🐱</div>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2023-05-02

我来回答

css 将图标放置在居中图像的角落

1条答案

相关问题

热门标签

最新问答