Build a Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

How do I center image? I tried ‘justify-content:center’ in CSS file

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css">
    <meta charset="UTF-8" />
    <title>Tribute Page</title>
  </head>
  <body>
    <main id="main">
      <h1 id="title">Dr. Norman Borlaug</h1>
      <div id="img-div">
        <img display="block" id="image">
        <div id="img-caption">Picture caption</div>
        </div>
        
        <div id="tribute-info">Text describing subject of page</div>
        </div>
        <a href="www.google.com" id="tribute-link" target="_blank">Google Link</a>
      </main>
  </body>
</html>

/* file: styles.css */
div > img{
  max-width:100%;
  display:block;
  justify-content:center;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36

Challenge Information:

Build a Tribute Page - Build a Tribute Page

Github Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-tribute-page/bd7158d8c442eddfaeb5bd18.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Hi @BrianL1018,

Since you’ll probably want to center the image caption, too, maybe you should target the container.

Happy coding!

3

Hi buddy, See here this is the img container and in order to make it centre you need to do select it img-div

Here is the another profile name align-items you can do use it in order to centre the img element.

Hope You Understand.

4

Please also note that the img element does not take a display attribute.

And if you want to use justify-content to center the container, your display should be set to flex, not block.

A Complete Guide to CSS Flexbox | CSS-Tricks

5

Still stuck. I added the following to CSS file:

#img-div{

align-items:center;

}

6

Hi @BrianL1018,

Here are several errors I noticed:

  • The image was missing a src attribute

Your <img> element is empty:



<img display="block" id="image">
  • display="block" is not valid in HTML

display is a CSS property, not an HTML attribute.



<img display="block">
  • There is an extra </div> tag

You have:



</div>
</div>

when only one closing tag was needed.