html - 如何根据 div 大小在 div 上方动态添加文本

Question

我正在尝试在图像上方显示文本。图像是动态的，有时它很大，有时它很小。

我需要在左上角的图像上显示文本，但不幸的是，对于小图像，它向左浮动太多，存在间隙。

如何根据图像宽度在图像 div 上方显示文本？

<div id="content" class="sidebar__content p-2" style="overflow: hidden; position: relative;">
  <div class="bg-E4E4E4 viewer p-2 " style="filter: brightness(100%) contrast(1) saturate(1);" tabindex="0">
    <div id="hook" style="transform-origin: 0px 0px 0px; transform: matrix(0.776, 0, 0, 0.776, 0, 0);">
      <div class="imageNameStyle">500x500.jpg</div>
      <div class="outer-container" id="imgOuterContainer" style="width: 500px; height: 333px;">
        <div id="Container" class="inner-container" style="width: 500px; height: 333px;">
          <svg id="svgHook" style="pointer-events: none;"></svg>
          <canvas width="500" height="333" class="image-layer" id="canvasLayer"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>

我需要将文本 div 锚定到一个以下，任何帮助。

标签： htmlcss

Answer 1

可以使用伪选择器来实现:before

.container{
  display: flex;
}
.img::before {
  content: "Above text";
  position: relative;
}

<div class="container">
<div class="img">
<img src="https://picsum.photos/200">
</div>
<div class="img">
<img src="https://picsum.photos/200">
</div>
<div class="img">
<img src="https://picsum.photos/200">
</div>
</div>