How to center on webpage

[KO-d14]

I am trying to figure out how to center the movie images and caption, as well as the background and trivia facts section. Often times I go back and forth between a laptop and a desktop, and I have noticed that the adjustments that I make on one monitor doesn’t look the same on the other. I tried resolving this by using flex which I thought would be a good way to further understanding how flexbox works by implementing them, but I think I ended up confusing myself.

I would like to have feedbacks on my code on where it needs correction, etc.
MyCodePen
Thank you in advance!

[leonfeng]

Hi @KO-d14.

If you click Analyze HTML from the editor dropdown, you’ll see that you’re missing a few closing tags. Also, the </ul tag on line 21 is missing a >.

There is a new CSS property place-content: center; that will center your flexboxes in both directions.

Finally, when I confuse myself, I find it helpful to make a new pen with the minimum necessary code (e.g. just the div containing the movie posters) and experiment until I get it right.

P.S. Miyazaki rocks

[OyeeBerkay]

if you can use “500px” will center the photo in 500px. If you want to average within the page, you have to do 100%. Try this.

#img-div {
  width: 100%;
  display: flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

#image{
  max-width: 500px;  
  display: block;
  height: auto;
  margin: center;
  padding: 20px;
  float: left;
}

[KO-d14]

Hi @leonfeng ,

Thank you for the tip on the analyze, it was very helpful on seeing what I’m missing, etc in the code when the code starts getting a bit messy and slightly overwhelming!

I have tried testing out the place-content property, but it doesn’t seem to make a difference when I added (and removing) it in an element.

And got it! That is a helpful tip and will try to do just that.

Miyazaki is amazing!