Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

I do not know how to center #image in it’s parent element. Does anyone know how? It’s the only thing left on the checklist.

Your code so far

<!-- file: index.html -->

<!doctype html>
<html>
  <link rel="stylesheet" href="styles.css">
<main id="main">
  <title id="title">
    Text
  </title>
  <h1>Text</h1>
  <body>
  <div id="img-div">
    <img id="image">
    <div id="img-caption">stuff
      </div>
    <p>stuff</p>
  </div>
  <p id="tribute-info">info</p>
  <a id="tribute-link" href="" target="_blank"></a>
  </body>
  </main>
  </html>

/* file: styles.css */
#image {
  height: auto;
  max-width: 100%;
  justify-content: center;
  align-items: center;
  display: block;
}

main {
  display: flex;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Challenge Information:

Tribute Page - Build a Tribute Page

2

Welcome to our community!

Add the following property and value: width: 100%; to the #image selector.

1 Like