Tell us what’s happening:
Why must I set the display attribute of the image to block in order to pass user story 8? It seems the page is perfectly fine without that setting.
Your project link(s)
Your browser information:
User Agent is:
Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0
Challenge: Build a Tribute Page
Link to the challenge:
The short answer is: Because the tests demand it. There are other ways to center an image, but the tests want you to use
By the way, if you make your browser window larger than the image, you’ll see that it’s not centered anymore. That’s because
margin:0 auto doesn’t work with
inline-block elements (an image is
inline by default). It’s a good idea anyway to always set images to
inline elements sometimes have confusing behaviour.
I think I have the answer. If I use an image with a smaller width, it is not at the center. So display: block is necessary, otherwise the margin setting does not work.
P.S. Just found jsdisco’s post after posting this one. And that one basically the same as mine. So, I choose that one as the solution. Thank jsdisco.
You’ve probably changed the default editor layout in codepen (which is panels on top, preview on bottom), so you didn’t see it right away. However I recommend that you keep that setting (panels either left or right), because that way you can easily grow/shrink the width of the preview window.
Never understood why codepen has that awkward default layout, anyway.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.