How to center the caption to the image?

See the Pen Tribute Page by Novum (@Novumel) on CodePen.

Read about the text-align property. But first, you need to fix a typo in several elements. There is no such element named figcuption.

Suggestion: Instead of having 3 different style selectors with the same exact properties/values, create a class with those properties and add that class to each element needing those properties/values. This avoids duplicate code and keeps your code DRY (Do Not Repeat Yourself).

I see at least 9 selectors in your CSS that would benefit from implementing what I suggest above.

1 Like

Many thanks! You helped me a lot!

Another suggestion is to have your media query that moves the images to the top much sooner. The photos get way too small otherwise. Also, I would put a max-width on the photos when the screen width is lower. Currently, the images take up too much space (compared to the text below them) when the width is smaller. The other option is to make the section on the left narrower to allow the images on the right to be larger when the screen width is wider.

1 Like