Submitted about 1 year ago
Result summary using vanilla css
@francismudzungayiri
Design comparison
SolutionDesign
Solution retrospective
I struggled to center that circle How can center that circle without using a transform in css? Any help appreciated
Community feedback
- @Daviddp96Posted about 1 year ago
Hey there,
You could add flex to your left-box class!
Here's how:
.left-box { display: flex; flex-direction: column; align-items: center; justify-content: center; }
Now you'll notice the text below is moved left, but for that you just have to disable the transform you added
transform: translateX(38%);
When you want to center things within a small container such as this one, it's best to use flex, you could also use grid but I find this simpler.
Marked as helpful0 - @OlamideAfunshoPosted about 1 year ago
I think you can also do this:
. box { Width:40%; Margin-left: auto; Margin-right:auto; } This will center the box.
0
Please log in to post a comment
Log in with GitHubJoin 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