Tribute Page - Build a Tribute Page

HTML-CSS
1

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

2

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
3

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
4

Thank you, guys! you are sooooo helpful <3

2 Likes
5

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