Tests pass when the dev tools is open

This is really frustrating, I keep getting the same error, that my img element isn’t centered in its parent element. I have text-align = center; in the parent element but when I run the tests, that one always fails until I open developer tools on the right side of the screen. Then when I run the tests, all of them pass. As soon as I close developer tools and run the tests again, the same one, "img element must be centered within its parent element. Please help!

https://codepen.io/webdevdaveSD/pen/GbQZZJ?editors=0010

Images by default are display: inline; just like text. Displayed like this text-align: center; will center an image. However, you said display: block; so now you have to use margin: 0 auto; or something else like flexbox, grid, or etc. I just removed display: block; from the CSS.

2 Likes

WOW!! Thank you so much for that!! Worked perfectly!!