如何使响应圈 <div> 中的文本也响应答案

【问题标题】：How to make text in responsive circle <div> responsive as well如何使响应圈 <div> 中的文本也响应
【发布时间】：2018-08-09 12:18:28
【问题描述】：

我已经处理这个问题好几天了，这让我很抓狂，当我缩小屏幕时，我希望圆圈内的文本移动到圆圈 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>

【问题讨论】：

标签： html css responsive-design responsive

【解决方案1】：

响应式网站 - @media (min-width:450px) and (max-width: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;

}
}

【讨论】：

【解决方案2】：

使用另一种方法使文本居中。这是 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>

【讨论】：