html - 如何使响应圈 中的文本也响应

Question

我已经处理这个问题好几天了，这让我很抓狂，当我缩小屏幕时，我希望圆圈内的文本在 cirkle div 内的相同位置移动，如图所示。

如果您有任何提示，请分享!

CSS 代码和 Html 代码:

.circleBase {
  border-radius: 50%;
}

.contact-circle {
  margin-top: 29%;
  margin-left: 4%;
  position: fixed;
  width: 23%;
  height: auto;
  padding-top: 23%;
  background-color: rgba(255, 86, 86, 0.2);
}

#contact-text {
  top: 20%;
  bottom: 20%;
  left: 18%;
  font-size: auto;
  position: absolute;
  text-align: center;
  width: 60%;
  opacity: 1;
}

<div class="circleBase contact-circle">

  <div id="contact-text">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
    </p>
  </div>

</div>

Answer 1

使用另一种方法使文本居中。这是 flex 的一个想法:

.circleBase {
  border-radius: 50%;
}

.contact-circle {
  position: fixed;
  width: 23%;
  height: auto;
  padding-top: 23%;
  background-color: rgba(255, 86, 86, 0.2);
}

#contact-text {
  top: 0;
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center
}

<div class="circleBase contact-circle">
  <div id="contact-text">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
    </p>
  </div>
</div>