Tribute Page - Build a Tribute Page Center img within parent element

HTML-CSS
1

Tell us what’s happening:
Im having trouble with this one requirement to pass. When I run my code my image looks aligned. Im not sure what to do.
Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <main id="main">
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="76ers tribute" />
    <link rel="stylesheet" href="styles.css" />
    <title id="title">76ers Tribute</title>
    <h1 class="title">The 76ers Tribute</h1>
  </head>
  <body>
    <p class="caption"> The page for the brotherly love</p>
    <div id="img-div" >
      <img src="https://www.basketballnetwork.net/.image/t_share/MTk0NjczMjAyMDU4NzY1NDc0/allen-iverson.jpg" alt="allen iverson" id="image" />

    <div id="img-caption" class="img-caption"><i>'Allen Iverson SG'</i> 
    </div>
    </div>
    <section>
      <h2 class="list">All Time 76ers Starting Five</h2>
       <p class="caption-two" id="tribute-info"> This is all my personal opinion. Feel free to leave your starting five at the bottom of the page</p>
      <ol>
        <li><b>Allen Iverson</b> - 11x All Star 1x Mvp</li>
        <li><b>Doug Collins</b> - 4x All Star</li>
        <li><b>Julius Erving</b> - 16x All Star 4x Mvp 1x NBA Champ</li>
        <li><b>Charles Barkely</b> - 11x All Star 1x Mvp</li>
        <li><b>Joel Embiid</b> - 6x All Star 1x Mvp</li>
      </ol>
    </section>
    <form>
      <section>
        <h2 class="newsletter"> Newsletter SignUp </h2>
        <div>
          <label for="name"> Name:</label>
          <input type="name" id="name" placeholder="Enter your name" />
        </div>
        <br>
        <div>
          <label for="email"> Email:</label> 
          <input type="email" id="email" placeholder="Enter your email" />
        </div>
      </section>
      <div><button type="submit"> Submit </botton></div>
      <p class="tribute-link" target=""> For more visit the <a href="https://www.nba.com/sixers/fans" id="tribute-link" target="_blank">76ers</a> main homepage</p>
    </form>
    </main>

  </body>

</html>



/* file: styles.css */
img {
  width: 100%;
  max-width:100%;
  display: block;
  height: auto;
  padding-left: 10px;
  padding-right: 10px;
  margin: 5;
  justify-content: centered;

}

img-div {
  display:flex;
  align-items: center;
}

body {
  background: #f2f3f4;
  font-family: sans-serif;
  color: #212f3d;
  align-items: center;
}
.title {
  font-size: 48px;
  text-align: center;
  justify-content: space-between;
}

.caption {
  text-align: center;
  font-size: 18px;
  padding-top: 0;
  padding-bottom:0;
}

.list, .caption-two, .newsletter, label {
  padding-left: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
}

button {
  display: block;
  margin: 40px auto;
  padding: 15px;
  font-size: 20px;
  background: #d0d0d5;
  border: 3px solid #3b3b4f;


}

form {
  text-align: center
}
.img-caption {
  text-align: center;
}
.tribute-link {
  text-align: center;
  font-size: 14px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

2

So here’s the thing. The image can’t really be centered within its parent if its width is 100% because it takes up all the width in the parent so there is nothing to center. I hope that makes sense.

Reduce the width of the image a little and then center it.

1 Like