如何在响应圈<div>中生成文本以及

Question

我已经解决了这个问题已经有好几天了，它让我发疯了，我希望当我将屏幕缩小时，圆圈内的文字在cirkle div内的相同位置移动，如图所示图片。

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

CSS代码和Html代码：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<div class="circleBase contact-circle">

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

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用其他方法使文本居中。这是flex的一个想法：

＆＃13;

＆＃13;

.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
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

响应式网站 - @media（最小宽度：450px）和（最大宽度：900px）{css style}

<div class="circleBase contact-circle">

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

</div>

Css @media示例

.circleBase {
height:800px;
width:800px;
}

@media (max-width:479px) {

.circleBase {

height: 400px;
width:400px;

}
}