Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here: I’m having trouble centering an image within its parent container using CSS. Despite trying various methods, my code is still not being accepted, and I’m seeking assistance to achieve the desired centering effect."

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link href="styles.css">
</head>
  <body>
    <main id="main">
      <h1 id="title">Dr. Noraman Bourlag</h1>
      <figure id="img-div">
        <img id="image">
        <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>
      </figure>
      </div>
      <div id="tribute-info">
        <h3>Here's a timeline of Dr. Bourlags life</h3>
      </div>
      <a id="tribute-link" href="#" target="_blank"></a>
    </main>
  </body>
</html>

/* file: styles.css */
img{
  display: block;
  max-width: 100%;
  
}

#image{
  max-width: 100%;
  height: auto;
  margin: auto;

}

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) 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

I spot a few issues.

No.1:
In order to test this properly, you should have a src attribute for your image so you can better see the alignment issues

No.2:
You set the image div items to flex which has a flex direction of row

you can either set it to column
or just remove those styles all together to pass the tests

3 Likes
3

You can use a placeholder for the image https://placehold.co/400

To expand a bit. Flexbox will put elements on the same line by default. Having the figcaption and img elements on the same line will prevent the image from centering as it is sharing the space with another element.

As said, you can use column for the flex-direction.

2 Likes
4

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