css border-radius 圆变成椭圆，position: absolute

Question

我正在围绕一个很棒的字体图标创建一个圆圈。我的问题是当我添加 position: absolute 时圆变成了椭圆。

如果我设置 display: block

也会发生同样的情况

这是我想要实现的目标的图像 -

<slide class="assessment-score">
  <div class="score-heading pass">
    <span id="score-salutation" class="light">CONRADULATIONS</span>
    <span id="score-message">YOU HAVE PASSED</span>
    <i class="fa fa-check-circle"></i>
  </div>
  <div class="score-results">
    <span id="score">You have scored 92%</span>
    <button>DOWNLOAD YOU CERTIFICATE</button>
    <a id="assessment-close"><i class="fa fa-times-circle-o"></i> CLOSE ASSESSMENT</a>
  </div>
</slide>

css

slide.assessment-score .score-heading{
  height: 33%;
  background-color: #a8db66;
  border-radius: 5px 5px 0 0;
  color: #ffffff;
  position: relative;
}
slide.assessment-score .score-heading i{
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  font-size: 6em;
  margin-bottom: -30px;
  border-radius: 50%;
  padding: 1rem
  background-color: black;
}

Answer 1

要使绝对定位的 div 水平居中，您不需要使用 left: 0 和 right: 0。正如您所看到的，这实际上通过将 div 的一端设置为包含框的左边缘，将另一端设置为右边缘来将其拉伸。

要水平居中绝对定位的 div 试试这个：

slide.assessment-score .score-heading i {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

有关其工作原理的详细信息，请参阅：

css border-radius 圆变成椭圆，position: absolute

css border-radius circle becomes ellipse with position: absolute

html

css

css-position

font-awesome