Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:
I have run the test, but it keeps showing:
" Your #image should be centered within its parent."
I don’t know how to solve this problem. Is there anyone who can help me with this question? Thank you so much!

Your code so far

<!-- file: index.html -->
<!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="freeCodeCamp Accessibility Quiz practice project" />
    
    <link rel="stylesheet" href="styles.css" />
  </head>
  <main id="main">
    <h1 id="title">Michael Jackson</h1>
    <h3> "King of Pop"</h3>
  
  <div id="img-div">
    <img display="block" id="image" src="https://i.pinimg.com/originals/5c/32/f3/5c32f3321f32abcfb74741d8aa56982e.jpg" />
    
  <div id="img-caption" >(Michael Jackson standing on stage)

  </div>
  
  </div>
<div>
  <p >Here's a time line of Michael Jackson's life:
    <ul id="tribute-info">
    <li>Aug 29 1958:Michael Jackson Born.Michael Joseph Jackson was born in Gary, Indiana </li>
    <li>1969:The Jackson Five debut.In August 1969, shortly before Michael turned 11, the Jackson 5 opened for Diana Ross at the L.A. Forum, and in December, they issued their debut album, Diana Ross Presents the Jackson 5. </li>
    <li>1979:"Off the Wall" solo album catapults Michael Jackson to superstar status</li>
    <li>Nov 30 1982:Michael Jackson Releases "Thriller"</li>
    <li>Jan 2 1983:Michael Jackson releases "Billie Jean"</li>
    <li>Feb 14 1983:Michael Jackson releases "Beat It"</li>
    <li>Mar 25 1983:Michael Jackson popularizes the moonwalk</li>
    <li>Aug 31 1987
Michael Jackson releases 7th studio album "Bad".20 years after its release, the album has sold over 30 million copies worldwide, and shipped 8 million units in the United States. Bad is the first, and currently only album ever to feature five Billboard Hot 100 #1 singles.</li>
    <li>1993:"Dangerous-The Short Films" Airs</li>
    <li>Aug 17 1993:Michael Jackson accused of and investigated for sexual abuse</li>
    <li>May 26 1994:Michael Jackson marries Lisa Marie Presley</li>
    <li>Jan 18 1996:Lisa Marie Presley divorces Michael Jackson.</li>
    <li>Nov 15 1996:Michael Jackson marries Debbie Rowe</li>
    <li>Feb 13 1997:Michael Joseph (Prince) Jackson Jr. born to Michael Jackson and Debbie Rowe</li>
    <li>Jul 17 2007:"Thriller" - Prisoners Perform at CPDRC in Cebu, Philippines</li>
    <li>Jun 25 2009 2:18PM:Michael Jackson Rushed to Hospital in Cardiac Arrest</li>
    <li>Jun 25 2009 3:09PM
Michael Jackson Dies at 50</li>
    </ul>
  </p>
  <p>If you have time, you should read more about this incredible human being on his <a id="tribute-link" href="https://en.wikipedia.org/wiki/Michael_Jackson"  target="_blank">Wikipedia entry </a>.</p>
</div>
</main>
</html>

/* file: styles.css */
h1, h3 {
  text-align: center;
}

img {
 text-align: center;
 max-width: 100% ;
 max-height: auto;
 min-width: 300px;
 width: 40%;
 margin: auto;
 display: block;
 border: 3px solid white;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36 Edg/106.0.1370.42

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

2

display=“block” doesn’t belong to ‘img’ element. Where is the ‘body’ element?

3

you have a few errors in your html
I suggest you use a html validator to fix these.

But w.r.t. the centering the problem is the min-width setting.
You should not use a px setting, rather use a relative unit.

4

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