Currently I’m working on a tribute page. Here is what I got: https://codepen.io/geekboy/pen/jyKOKX
I have some troubles with the content inside header, which I want to center vertically and horizontally.
I’ve tried to add align-items: center; and justify-content: center; into header section in my CSS file, but it doesn’t work. I don’t know why - I think it should work, because I set body as display: flex;.
If anyone could help, I will be extremely grateful.
display:flex from the body. It isn’t doing anything for you (the page already flows down in a column. ).
Instead, restructure your
header css to something like this:
padding: 2rem; /* give it a little space */
display:flex only applies to immediate children of the tag
flex is attached to. It doesn’t cascade and inherit.
Thank you very much! It works like a charm!