I cant finish my tribute. Last task (center image to parent)

HTML-CSS
1

hi, Im doing the tribute page and am stuck on the last task which is "your image should be centered within its parent. I tried all sorts of combos and found a little help in the how to ask a question part but still no luck. Also, the get help link directly on the page isn’t working for me so i have to post here sorry.

Also, i had a tried to give my quote a max width of 400px and in doing so it moved it out of center and all the way to the left. not sure why?

any help would be greatly appreciated. Thank you!

  text-align: center;
}
#img-div{
  background-color: white;
}

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

#img-caption{
  padding:15px;
}

main{
background-color:lightgrey;
padding:20px;
}

HTML PART
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Dr. Norman Page"/> 
    <title id="title">Dr. Norman Boulag</title>
    <link rel="stylesheet" href="styles.css"/>
  </head>
  <main id="main">
    <header id="header">
      <h1>Dr. Norman Boulag</h1>
      <p>The man who saved a billion lives</p>
    </header> 
    <div id="img-div">
      <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg" id="image"/>   
      <div id="img-caption">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. 
      </div> 
    </div> 
    <div id="tribute-info">
      <h2>Here's a timeline of Dr. Buloug's life:</h2>
    </div>  
    <ul>
      <li><b>1914</b>- Born in Cresco, Iowa</li>
    </ul>
      <div>
        <p>
          "Borlaug's life and achievement are testimony to the far-reaching
          contribution that one man's towering intellect, persistence and
          scientific vision can make to human peace and progress."
        </p>
        <p>--Indian Prime Minister Manmohan Singh</p>
    </div>
    <div id="t-link">
      <p>If you have time, you should read more about this incredible human being on his <a id="tribute-link" target="_blank" href="https://en.wikipedia.org/wiki/Norman_Borlaug">Wikipedia entry</a>
    </div>  
  </main> 
</html>   
type or paste code here
2

Get rid of the padding on the image. It’s throwing the tests off.

3

You can also add box-sizing: border-box if you want to keep the padding.

* {
  box-sizing: border-box;
}

Although, it would make more sense to have the padding on the container and not the image element.

4

Thanks for getting back! so i took away the padding at that worked. :slight_smile: Now that i think about it, it makes sense that that would throw it off a bit. i added to my css giving a max-length of 400px to my qoute. But it moved it out of center. Can someone explain why? Thanks again for the help. much apreciated.

`*{
text-align: center;
}
#img-div{
background-color: white;
}

#img-div img{
display:block;
max-width:100%;
height:auto;
margin:auto;
}

#img-caption{
padding:15px;
}

main{
background-color:lightgrey;
padding:20px;
}

.quote{
max-width: 400px;
}`

5

You do not have an element with that class in the HTML you posted so I’m not sure what element you are referring to but I assume it is the div after the ul.

To center it you have to add an auto margin to the element.

.quote {
  max-width: 400px;
  /* same as margin left/right auto */
  margin-inline: auto;
}
6

got it solved. Thanks for the reply

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.