Keith Power Keith Power - 1 month ago 10
CSS Question

css border-radius circle becomes ellipse with position: absolute

I am creating a circle around a font awesome icon. My problem is when I add

position: absolute
the circle became an ellipse.

The same happens if I was to set
display: block


enter image description here

Here is an image of what I am trying to achieve -

enter image description here

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


the 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

To horizontally center an absolutely positioned div you don't use left: 0 and right: 0. As you can see, that actually stretches it out by setting one end of the div to the left margin of the containing box, and the other end to the right margin.

To horizontally center an absolutely positioned div try this:

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

For details about how this works see: Element will not stay centered, especially when re-sizing screen