+ 1

Center children and z-index

How can I center the children horizontally in the page and stack the circles under .centered? https://sololearn.com/compiler-playground/WEgURf0EFPaW/?ref=app

18th Jan 2025, 7:54 AM
Elena
Elena - avatar
6 Réponses
+ 5
Do you mean like this? I've put comments in the CSS tab. https://sololearn.com/compiler-playground/W5bJrv0zYXTJ/?ref=app
18th Jan 2025, 7:49 PM
Ausgrindtube
Ausgrindtube - avatar
+ 2
don't nest the 3 circles in the .centered div
18th Jan 2025, 11:40 AM
Bob_Li
Bob_Li - avatar
+ 1
If I understand your question correctly, you would put the children in a div and centre that. What do you mean by stack?
18th Jan 2025, 9:32 AM
Ausgrindtube
Ausgrindtube - avatar
+ 1
Sorry for not being clear, how to make the elements within .centered display horizontally centered within the page? With stack, I'm trying to arrange the circle elements to look like they're under the .centered element with Z-index property. https://sololearn.com/compiler-playground/WnfPs6Ey5JAG/?ref=app A little like this
18th Jan 2025, 10:10 AM
Elena
Elena - avatar
+ 1
Elena are you trying to make the centers of the different size circles line up? If so, you want to apply transform:translate(); to each of the smaller circles. For translate values, use half of the difference between largest radius and current radius. In your last example, blue circle had radius 100, red had 50. Half of difference is (100-50)/2 = 25. So .red would include transform:translate(25px, 25px);
19th Jan 2025, 5:28 AM
Shardis Wolfe
0
Thanks!! The advises helped
20th Jan 2025, 6:45 AM
Elena
Elena - avatar