1

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;
}
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Keith Power
  • 13,891
  • 22
  • 66
  • 135
  • you need to define the width and height with absolute positioning OR wrap it in a relative positioned div OR set the positioning to relative and use the top,left to position it – Lucky Chingi Nov 04 '15 at 00:39
  • 1
    The problem isn't because you've set `position:absolute`. It's because you've set `right: 0` AND `left:0`. That tells it to occupy the full width. – RyanS Nov 04 '15 at 00:41
  • the problem is the height width will change so I won't know the value – Keith Power Nov 04 '15 at 00:42
  • I have set `right: 0` and `left: 0` to centre it, is this wrong? – Keith Power Nov 04 '15 at 00:46
  • Sorry, my bad. You're right, but you also need `margin: 0 auto;`, and you need to define the width with this solution. You say that the width and height change, but maybe if you define `width: 1em`? That would be with respect to the `font-size` that you define on `i`. – RyanS Nov 04 '15 at 00:53
  • changing `width: 1em` does make a circle but pushes it to the left – Keith Power Nov 04 '15 at 00:57

1 Answers1

1

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 edge of the containing box, and the other end to the right edge.

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

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701