https://codepen.io/leon147/pen/YgpEZW

HTML-CSS
1

I have problems with solving the User Story #9 The img element should be centered within its parent element.
Obviously I am doing something wrong but I do not know what. I have positioned my img element inside a div element, I do not know what else can I do.

Link to my code pen:

Please help, Ty.

2

You linked to the test suite template…

3

I think now is better.

4

Do you maybe have a solution to my problem.
I would paste the section that is troubling me but when I paste it only a picture of Nikola Tesla shows up.

5

After you paste the code, select it and use the </> button in the code to format it, it will make backticks appear around it so that the code shows
Like this:

markdown_Forums
markdown_Forums1024Ă—600 194 KB

6

You need to center your img tag. In your CSS try adding margin to the img tag.

7

I have tried but no succes. I think the problem is in HTML not in CSS :confused:
This is my CSS for the image element

#image{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}

8

And this is the code now.

9

So the problem is in the image element. User Story #9: The img element should be centered within its parent element. Here I would say that the div is the parent element, or am I wrong?

<div id="img-div">
	<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/d/d4/N.Tesla.JPG" alt="" > 

	<p id="img-caption">Nikola Tesla on the picture</p>


</div>

<div>
	
	<img class="image1" 
	src="https://image.shutterstock.com/image-vector/ladybug-ladybird-vector-graphic-illustration-260nw-1040847991.jpg">

</div>


<a href="https://thefactfile.org/nikola-tesla-facts/" id="tribute-link" 
target="_blank">More interesting stuff</a>
    10

    No it is your CSS.

    It is centered now but you have it on your image ID not your img tag. Change #image to img and you’ll get a different error now (you still need to set the responsive code in your CSS)

    11

    I inserted the script FCC provides that allows you to check which stories you’ve completed (you don’t have it), and you are missing the responsive image.
    Script:

    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

    Failed Test:

    1. The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size.

    Try using the "max-width" style property : expected 'none' to not equal 'none'
AssertionError: Try using the "max-width" style property : expected 'none' to not equal 'none'
    at s.l (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:262:1134)
    at s.e.(anonymous function) [as equal] (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:325:126)
    at Function.n.notStrictEqual (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:224:629)
    at r.<anonymous> (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:154:33648)
    at c (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:31608)
    at o.f.run (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:31544)
    at m.runTest (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:37114)
    at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:37976
    at s (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:36426)
    at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:36495

    Basically, add a max-width: 100%; item to your image.
    Solution (only use if you’re completely stumped):

    #image{
   display: block;
   margin-left: auto;
   margin-right: auto;
   width: 50%;
}
    12

    Thank you. You were right. I had to make the image responsive. This is the code that I used

    #image {
    width: 100%;
    height: auto;
    max-width: 625px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    }

    13

    Thank you. I passed the test by making the picture responsive.
    My tribute site now: https://codepen.io/leon147/pen/YgpEZW

    14

    Don’t use px values!!!
    Use percentages, like 75%…

    1 Like