Tribute Page - Build a Tribute Page

Hi guys, I have a problem with this point
Your #image should be centered within its parent.

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>
    <main id="main">
      
      <h1 id="title">Dr. Norman Borlaug</h1>
      <div class="center">
      <figure id="img-div">
        <img src="wwfefe.cs" id="image" max-width="400" height="34"/>
        <figcaption id="img-caption">BHBUYVUBIBYTVUBIUNUYVTYTU</figcaption>
        </figure>
        </div>
        <p id="tribute-info">dbwjehehbhewbkvefvigdvhVdevdyvdey</p>
        <a href="fewfew.com" value="feffe" id="tribute-link" target="_blank" >NHBBUOB</a>
      </main>
</body>
</html>
/* file: styles.css */
#image {
  display: block;
  max-width: 100%;
  height: auto;
   text-align: center;
}



Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Safari/605.1.15

Challenge Information:

Tribute Page - Build a Tribute Page

Referencing back to the Cafe Menu lesson where it wants you to center an image within its parent element it appears you are using the wrong property. You want to use:

#image {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Currently you are using text-align: center; which does not give the same effect for images it seems.

1 Like

In addition to what @Alabastor suggested, the message said Your #image should be centered within its parent. So you don’t need to center the image directly. Instead center the element it is nested in.

1 Like

Thank you, guys! you are sooooo helpful <3

2 Likes

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