Skip to content
Submitted over 1 year ago

Summary component designed using HTML and Vanilla CSS

Shaunwk•50
@Shaunwk
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

For the circle I had to do margin-left: 3rem; to get the circle centered.

The complete code for the circle is circle { width: 9rem; height: 9rem; display: flex; margin-left: 3rem; text-align: center; justify-content:center; align-items: center; border-radius: 50%; font-size: 30px; color: #fff; line-height: .5rem; background-color: hsla(241, 81%, 54%, 0.427); }

Why did it not center without the margin-left?

Community feedback

  • Ryan Oliver•170
    @ryanolivPosted over 1 year ago

    Hey - looking good! You can center everything in your 'left-side' div instead of adding a margin-left to try achieve the same effect. Try either display: grid; place-items: center; OR display: flex; align-items: center; justify-content: center;. Personally, i like to use display: grid; place-items: center; to center things inside divs as its shorter to write.

    Happy coding! :)

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord