Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

Although the image in preview is centered, my code cannot pass the final requirement of “#image should be centered within its parents”. My code regarding image is as follows: Thank!
img{
padding: 40px;
background-color: white;
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title id="title">Ni Kuang Tribute Page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Ni Kuang</h1>
    <p>The great science fiction master who taught us to dream</p>
  </header>

  <main id="main">
    <figure id="img-div">
      <img id="image" src="https://thechinaproject.com/wp-content/uploads/2022/07/Ni-Kuang-featured-image.jpg" alt="Picture of Ni Kuang">
      <figcaption id="img-caption">Ní Kuāng 倪匡, a prolific Chinese author and screenwriter who was one of the most admired and influential figures in the Hong Kong film industry, renowned particularly for scripting several classic martial arts movies, has passed away at the age of 87.
      </figcaption>
    </figure>

    <div id="tribute-info">
      <ul>
        <li><span class="bold">1935</span> - born in Shanghai, China</li>
        <li><span class="bold">1951</span> - joined the People's Liberation Army at the age of 16</li>
        <li><span class="bold">1956</span> - sentenced to ten years' imprisonment as a counter-revolutionary</li>
        <li><span class="bold">1957</span> - Ni arrived in Hong Kong with help of human smuggler.</li>
        <li><span class="bold">1963</span> - His famous Wisely Series was first published in serial form in Ming Pao Daily.</li>
        <li><span class="bold">1992</span> - moved San Francisco, USA</li>
        <li><span class="bold">2006</span> - move back to Hong Kong</li>
        <li><span class="bold">2022</span> - died at the age of 87</li>
      </ul>
    </div>
    <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/Ni_Kuang">Wikipedia entry</a></p>

  </main>
</body>
</html>

/* file: styles.css */
body {
  background: #f5f6f7;
  color: #1b1b32;
  font-family: Verdana;
  margin: 0;
}

header{
  width: 100%;
  height: 120px;
  background-color: #dcddde;
  text-align: center;
  padding-top: 4px;
  padding-bottom: 5px;
}

main{
  padding-top: 50px;
  width: 80%;
  margin: auto;
}

img{
  padding: 40px;
  background-color: white;
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
  /*Your #image should be centered within its parent.*/


#img-caption{
  font-size: 0.9em;
  padding: 20px 0;
}

.bold {
  font-weight: 800;
}

#tribute-info{
  padding-bottom: 20px;
}

Your browser information:

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

Challenge Information:

Tribute Page - Build a Tribute Page

2

hi there, have you tried to use the developer tools in the browser to look at what may be making the image off-center? It is a good idea to learn how to use these.

3

havent tried before. Will take a look. Thanks

4

it looks like the margins are off. so I added the following code:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

This is to make sure everything that you didn’t explicitly give a margin or padding to, gets none of them, and also the border-box setting is standard so the math adds up.

5

It works!! Thank you so much!

1 Like