Could u guys help me?

[jasper2]

i am in a free code camp challenge and it says "Failed:Your #image should be centered within its parent " i know what it means but i dont know how to wright it.

MY CODE SO FAR:

/* file: index.html */
<link rel="stylesheet" href="styles.css">
<main id="main">

<h1 id="title">Dr. Norman Borlaug</h1>

<div id="img-div">
<img id="image"></img>
<div id="img-caption">hello</div>
<div id="tribute-info">helloo</div>
<a href=""id="tribute-link"target="_blank"></a>
</div>
</main>

/* file: styles.css */
#title {
color: pink;
}
#image {
display: block;
max-width: 100%;
height: auto;
}

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36

Challenge: Build a Tribute Page

Link to the challenge:

freeCodeCamp.org

thanks jasper

[okibe007]

There are a few ways to center an image but here’s the steps to my favorite one
step 1: change the image display to block;
step 2: give it margin-left and margin-right of auto;
That should center your image in its container

@jasper2

<img id="image"></img>

Your image tag here is missing a source attribute , also remember the image tag is self closing so you can skip adding the </img> and just close it with >

[jasper2]

it worked!! thx
display: block;
margin-left: auto;
margin-right: auto;