fix(client, curriculum): center images in challenge description

[huyenltnguyen]

Checklist:

• I have read and followed the contribution guidelines.
• I have read and followed the how to open a pull request guide.
• My pull request targets the main branch of freeCodeCamp.
• I have tested these changes either locally on my machine, or GitPod.

This PR fixes an image alignment issue caused by #55068.

Screenshots

Before	After

[Dario-DC]

In case you haven't done it yet, could you include this two? 🙂

freeCodeCamp/curriculum/challenges/english/07-scientific-computing-with-python/learn-special-methods-by-building-a-vector-space/65f03d9f92eac9183a4d3281.md

Line 12 in dda4bb9

<img class="img-responsive center-block" alt="a 2-dimensional vector of coordinates (2, 3)" src="https://cdn.freecodecamp.org/curriculum/python/2dvector.png" style="background-color: white; height: 350px; width: auto; padding: 15px;">

freeCodeCamp/curriculum/challenges/english/07-scientific-computing-with-python/learn-special-methods-by-building-a-vector-space/65f3fe07cc763212efe91285.md

Line 12 in dda4bb9

<img class="img-responsive center-block" alt="a 3-dimensional vector of coordinates (4, 6, 3)" src="https://cdn.freecodecamp.org/curriculum/python/3dvector.png" style="background-color: white; height: 350px; width: auto; padding: 15px;">

[huyenltnguyen]

@Dario-DC Hah, I missed those. Thank you! 😄

[ojeytonwilliams]

Nice work, @huyenltnguyen.

LGTM 👍

[moT01]

Wondering if this is the best approach. I'm fine with it, but couldn't we do something like .description > img { margin: auto } - so it's a little more universal?

Also wondering about other clients. Maybe it will make things more difficult for mobile or other future clients, in that they may have to overwrite the inline styles. Perhaps that's fine.

Also now wondering if the left alignment is better - or maybe, good enough.

[huyenltnguyen]

Wondering if this is the best approach. I'm fine with it, but couldn't we do something like .description > img { margin: auto } - so it's a little more universal?

The only reason I didn't go with adding the styles in a stylesheet is because there are already inline styles, so keeping the styles in one place is easier to manage.

Also wondering about other clients. Maybe it will make things more difficult for mobile or other future clients, in that they may have to overwrite the inline styles.

I was wondering the same. I'm not sure if we want to have inline styles in the curriculum content at all, and was thinking how we could style the content in a different way.

I think an alternative approach is to include the desired layout/arrangement in the metadata, similar to the dialog in the scene JSON of English challenges. The clients would parse the metadata and handle the display accordingly.

Do you think this approach makes sense, and is it something we can add to CAP / CAP API?

[Sembauke]

Thanks Huyen!