Centering circle
Justify, align, place ... this is driving me crazy.
So why isn't my
.red-circle
centering inside the .circle-box
with place-self: center;
, when .katana
is doing it inside of .sword
. It's even disappering which just throws me off completely!
I just know there's some stupidly easy way of doing it, but I am missing it now ...
main.css in css folder:
https://github.com/AMarlonG/Japanese-style-responsivenessGitHub
GitHub - AMarlonG/Japanese-style-responsiveness: Creating a traditi...
Creating a traditional japanese card with principals from Jen simmons and Utopia fluid responsive calculations - GitHub - AMarlonG/Japanese-style-responsiveness: Creating a traditional japanese car...
28 Replies
I've made it work with some really hacky ways, like
align-self: center;
and then adding margin. But that doesn´t feel sustainable ...you get a grid and you get a grid, everyone gets grid 🤣 don't you think you went a little overboard with the grid usage ?
Haha! Maybe, but at least for this issue removing the grid on the parent doesn't let place work. So if I remove grid on
.sword
then the place-self
on .katana
doesn't work. I would love to make it work without! I just get so confused with the damn placement properties ... 😭you don't need grid on circle-box and sword at all
place-items: center
on content-left
should do all the jobyou are missing a semi colon in calc.css on line 6
there for your circle does not get a size, the variable
![](https://utfs.io/f/cf7ee774-e27e-4c28-b39b-c8aa526079f4-1nq2cb.png)
also the words they just flex bro no need for grid
you are also importing/adding the calc.css twice in html and css
with that semicolon it will work (did not change anything else)
![](https://utfs.io/f/e6748ecd-1018-4c72-b726-bfa8095753b0-1nq2cb.png)
... it's to late here in Norway now. I think that is the answer. 😅
9pm ain't late 😉
Ok, so it's all working now with all of your help. Thank you so much!
same time here in Netherlands,
But a few questions ...
I don't have to add the @import css in the css file, is that what you're saying?
no if you already loaded that file in html
![this](https://cdn.discordapp.com/emojis/701468726167470183.png)
cool!
And finally: using
place
only works when you use flex or grid, right? justify / align
can be used outside, but also with, a flex or grid container?