html - 定位文本，使其出现在图像内

Question

我是编码新手，我一直在尝试寻找解决方案，但到目前为止我还没有找到任何东西。我的问题是文本显示在 div 之外。 Like this.

如果我不使用边框半径，我只能将文本放入其中，但我想保留它。

这是代码:

div.polaroid {
  text-align: center;
  padding: 50px 50px;
}

div.prod-img {
  border-radius: 35%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
  padding: 0px 0px 70px 0;
}

<div class="col-lg-4 polaroid">
  <a href=""> <img class="prod-img" src="" alt="" />
  </a>
  <div>
    <p>  Name 1 </p>
  </div>
</div>

Answer 1

显然他在 div 内部，但大部分时间他都被图像占据了。

您可以尝试通过 position property 来修复此问题如上所述，或者如果您想以最手动的方式执行此操作，您可以使用 margin-top 将其向上移动，例如:

<p style="margin-top: -25px"> Name 1 </p>