Centering contend vertically and horizontally doesn't work

1

Hi.

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.

P.

2

Remove the display:flex from the body. It isn’t doing anything for you (the page already flows down in a column. :stuck_out_tongue_winking_eye: ).

Instead, restructure your header css to something like this:

header {
  background-color: #1C344C;
  padding: 2rem; /* give it a little space */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

display:flex only applies to immediate children of the tag flex is attached to. It doesn’t cascade and inherit.

Screen Shot 2017-07-16 at 19.36.43 .png889×273 48.8 KB

2 Likes
3

Thank you very much! It works like a charm!