Tribute Page - Build a Tribute Page

HTML-CSS
1

**Well, I can’t solve this requirement: “Your #image should be centered within its parent.”
Tried to use 2 methods to center #image, but they fail to satisfy the requirement. What do I do? **
it looks the same in my opinion

Screenshot_1
Screenshot_11919×1039 199 KB

Here is my code:
css

#img-div{
  display: flex; 
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#image{
  max-width: 100%;
  min-width: 450px;
  display: block;
  height: auto;
  margin: 0 auto 15px;
}

html

<figure class="img-container" id="img-div">
          <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg" class="img" id="image">   
          <div id="img-caption"><p class="text centered">Dr. Norman Borlaug, third from the left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</p></div>
</figure>

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

2

Hello
Try this code

#img-div{
background-color: white;
padding: 10px;
margin: 0 ;
}
#image{
display:block;
max-width: 100%;
height: auto;
margin: auto;

}

1 Like
3

Thank u very much, I was trying to solve it for an hour.:melting_face:

2 Likes
4

Keep up the great progress.

2 Likes
5

you made a mistake of giving id=“img-div” to your figure instead of your img
that’s why it wouldnt accept.

img is element, just like p, h1, or any other… so it can be styled accordingly

1 Like
6

it was a requirement to do like that

7

if it was, then you can’t style image through it.
¯_(ツ)_/¯

8

img-div is meant to be the element that holds the image, as per the instructions. Closing this topic.

1 Like