Can someone explain why the image won't align-center?

[r.sah]

Here is my tribute page, I wonder why the image doesn’t align in the center?
https://codepen.io/Redsterdu075/pen/QWKBpeQ

Thanks

[Jill-Ann]

Do you want the image to be in the center with the text over the top of it? Or with the text underneath it?

[r.sah]

Hello Jill-Ann, with the text underneath it would be better. Thanks for your help

[Jill-Ann]

Try using flexbox. I had a look at your code pen and I can get the image to center by making the img-div a flex container and adjusting the properties. So in your css, on the #img-div, do:

  display: flex;
  flex-direction: column;
  align-items: center;

display: flex - This makes the div a flex container
flex-direction: column - This tells it to make the axis vertical (not horizontal)
align-items: center - This puts everything in the center.

I don’t know if this is the best way to do it, but at least it works.

Also, be careful in your html where you have the closing tags for the elements. For example you have the #img-div and image inside an h2 tag. You also have the whole list inside a p tag.

Let me know if it works!

Also if you need some more info about flexbox check out this page https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[r.sah]

Thanks a lot Jill-Ann!