Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.
Hi there,
I am stuck in this project. The only thing I that is missing is that I (allegedly!?) forgot about setting the image to display:block but I clearly did that. I am totally aware that my overall work is by no means finished. Thank you for your replies!

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css"/>
    <title>John D. Rockefeller</title>
    </head>
    <body>
      
      <main id="main">
      <header id="title">John D. Rockefeller</header>
      <div id="img-div">
        
        <img id="image" src="https://upload.wikimedia.org/wikipedia/commons/7/73/John-D-Rockefeller-sen.jpg"/>
        
        <figcaption id="img-caption">This is a Caption</figcaption>
        </div>
    <div id="tribute-info">      
      <header>Here's a time line of John D. Rockefeller's life:</header>
      <ul>
        <li>first item</li>
        <li>second item</li>
        </ul>
    </div>
    <div>
      <a id="tribute-link" target="_blank" href="https://de.wikipedia.org/wiki/John_D._Rockefeller">Click for more information</a>
      </div>
      </main>
      </body>
  </html>

/* file: styles.css */
#main {
display: block;
margin-top: 200px;
margin-left: 200px;
margin-right: 200px;

}

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



#img-div > img {

 max-width: 100%;
 height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Your browser information:

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

Challenge Information:

Tribute Page - Build a Tribute Page

2

Hello and welcome:

Add a style text-align: center; to a #img-div > img selector.

So you pass the challenge. But your image isn´t display in low resolutions of displays. Cheek this.

Greets.

3

Hi and thank you for your reply,
but it still would not pass the challenge. Apart from that, why am I supposed to set a text property when centering an image?

Greetings

4

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