Html 图像后不显示文本

我正在尝试制作一个食品应用程序。这是其主页的一部分

<div class="Offer">
        <h1>What We Can Offer</h1>
        <p>from our hearts</p>
        <div class="circle">
          <img class="img-round" alt="" src={require("./images/round/green-plate.jpg")} />
          <p>Healthy</p>
        </div>
        <div class="circle">
          <img class="img-round" alt="" src={require("./images/Food/popsicle.jpg")} />
          <p>Sweet</p>
        </div>
        <div class="circle">
          <img class="img-round" alt="" src={require("./images/Home/man-dough.jpg")} />
          <p>Classic</p>
        </div>
</div>

---

我希望此文本显示在图像之后

它看起来是这样的：

---

您的图像高度应小于100% 然后，文本对齐必须居中

。圈出img{
宽度：自动；
身高：85%；
左边距：-50px；
}
.圆圈p{
文本对齐：居中
}

这是因为圆的边框隐藏了您的

p

文本

您可以通过以下几种方式解决此问题：

• 减少

  边界半径

  百分比
• 取消溢出：隐藏属性

• text align:center

  p本身-这是首选选项

---

为了便于理解圆是如何形成效果的，请为其背景上色（稍后只需还原此效果）。通过这种方式，您可以很容易地看到问题所在。

您的

元素中的
元素被
溢出：隐藏
隐藏。你需要让他们成为兄弟姐妹。您可以简单地将它们放在包装器div中


.circle包装器{
显示：内联块；
}
.圆圈{
宽度：300px；
高度：300px；
溢出：隐藏；
边界半径：50%；
}
.圆圈img{
宽度：自动；
身高：100%；
}
.圆形包装纸{
字体大小：30px；
颜色：黑色
}

我们能提供的
发自内心

健康的

甜蜜的

经典的

“我希望此文本显示在图像之后”，但在您提供的示例中，根本没有文本更改
波德尔半径
或
文本对齐
不会显示隐藏的文本。它被图像推到父“视口”之外，然后被
overflow:hidden
隐藏。我知道，在他给出一个可视示例之前，我回答了这个问题。我认为文本应该在圆圈内
.circle {
  display: inline-block;
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
  border-radius: 50%;
  margin-left: 125px;
}

circle p{
    font-size: 30px;
    color:black
}


.circle img{
   width: auto;
  height: 100%;
  margin-left: -50px;
}