... center div 😡
This feels like newbie shit, but I don't understand why my H1 is not centering within row 2 and column 2?
I've done all the place-items/content/self, justify, align, text-align on both the Header and the H1. Nothing is happening.
Repo
https://github.com/AMarlonG/Rondo-prototype/blob/main/index.html
Live test site
https://amarlong.github.io/Rondo-prototype/
14 Replies
Hi @Å Marlon G this isn't so clear.
Can you possibly send a screenshot of what you expect to happen?
Just something reslly descriptive of the issue and what you're going for
add
to the h1
... so why does the
width: 100%; fix this issue?
I did place-self: center centerwhich also works, and I did this before, but not with the width.honestly don't know but maybe it has something to do with the fact that the svg doesn't have width and height attributes specified
Hmm, ok ... 🤓
I might play with the svg later, but for now this works. Thank you very much! 🙏🏾
possibly relevant thing I ran into a while back with SVG. There's a default 300x150 size. Maybe it was centered properly but that 2:1 default aspect was causing some negative space that made it look not centered?
Thank you!
I totally forgot about this question, so haven't been here for a while, but I will look into it.
Could you clarify what you mean re default size of 300x150?
On OPs project or in general ?
for an inline
<svg> tag if you don't give it a width or height attribute, or a viewbox attribute the SVG will render to the page with a default width of 300px and default height of 150px. Same as the default size of the <video> tag
this is not specific to the OPs situationHmm I thought SVGs by default took up 100% of whatever container they were in.
Very interesting
I'd have to play around with it to confirm but I think the 100% happens when you add a
viewbox attrIt's all over the place depends what browser
FF gives a 300px width default to it ....
We really getting off topic in a solved thread though 😅