Tribute Page - Build a Tribute Page - Centering the #image

HTML-CSS
1

Tell us what’s happening: I seem to have passed all the tests regarding the tribute page except the last one which emphasizes on centering the image within its parent. Can you help me out?
Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main id="main">
      <h1 id="title">Dr. Norman Borlaug</h1>
      <p>The lady who saved a billion lives</p>
      <div id="img-div">
        <img id="image" src="https://unsplash.com/photos/IEj4pcYrsHA/download?ixid=M3wxMjA3fDB8MXxzZWFyY2h8MTl8fHZpbnRhZ2UlMjBkb2N0b3J8ZW58MHx8fHwxNjkyNzg4MTA4fDA&force=true&w=640">
        <figcaption 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.
        </figcaption>
      </div>
        <div id="tribute-info">
          <h3>Here's a time line of Dr. Borlaug's life:</h3>
          <ul>
            <li><span class="bold">1888</span> - Born in Nairobi, Kenya.</li>
            <li><span class="bold">1889</span> - Leaves his family's farm to attend the University of Minnesota, thanks to a Depression era program known as the "National Youth Administration"</li>
            <li><span class="bold">1900-1904</span> - Finishes university and takes a job in the US Forestry Service</li>
            <li><span class="bold">1905-1910</span> - Discovers a way to grown wheat twice each season, doubling wheat yields</li>
            <li><span class="bold">1955</span> - dies at the age of 95.</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="#"> Wikipedia entry</a></p>
    </main>  
  <body>
</html>

/* file: styles.css */
body{
  font-size: 16px;
}
#main{
  width: 100%;
  background-color: #d7cbce;
  border-radius: 10px;
}
#title, #main p{
  text-align: center;
}
#img-div{
  width: 90%;
  height: 450px;
  margin: auto;
  background-color: #ffffff;
  text-align: center;
  overflow: hidden;
  position: relative;

  display: flex;
  justify-content: center;
  align-items: center;
}
#image{
  max-width: 100%;
  height: auto;
  width: 80%;
  padding: 10px 60px;
  margin: 0 auto;
  display: block;
  object-fit: cover;
}
#img-caption{
  text-align: center;
}
#tribute-info{
  margin: auto  auto;
  width: 70%;
  padding: 10px;
}
#tribute-info h3{
  text-align: center;
  margin: 10px 0;
}
#tribute-info li{
  padding: 5px 0;
  font-size: 16px;
}
.bold{
  font-weight: bold;
}
p:last-child{
  font-weight: bold;
  font-size: 18px;
  padding: 0 0 20px 0;
}
#tribute-link{
  color: #3550cd;
}

Your browser information:

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

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

2

Welcome to our community!

Change the following CSS rule:

#img-div{
  width: 90%;
  height: 100%;
  margin: auto;
  background-color: #ffffff;
  text-align: center;
  }
3

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