css border-radius 圆变成椭圆,position: absolute
css border-radius circle becomes ellipse with position: absolute
我正在围绕一个很棒的字体图标创建一个圆圈。我的问题是当我添加 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;
}
要使绝对定位的 div
水平居中,您不需要使用 left: 0
和 right: 0
。正如您所看到的,这实际上通过将 div
的一端设置为包含框的左边缘,将另一端设置为右边缘来将其拉伸。
要水平居中绝对定位的 div
试试这个:
slide.assessment-score .score-heading i {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
有关其工作原理的详细信息,请参阅:
我正在围绕一个很棒的字体图标创建一个圆圈。我的问题是当我添加 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;
}
要使绝对定位的 div
水平居中,您不需要使用 left: 0
和 right: 0
。正如您所看到的,这实际上通过将 div
的一端设置为包含框的左边缘,将另一端设置为右边缘来将其拉伸。
要水平居中绝对定位的 div
试试这个:
slide.assessment-score .score-heading i {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
有关其工作原理的详细信息,请参阅: