Tribute Page - Build a Tribute Page

Tell us what’s happening:

For some reason my image center isn’t working? Last thing I need to do, any ideas on what is going wrong?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="styles.css">
<main id='main'>
  <h1 id='title'>Dr. Norman Borlaug</h1>
  <div id='img-div'><img id='image'><img src='https://www.pbs.org/wgbh/americanexperience/media/filer_public_thumbnails/filer_public/56/7c/567c2141-1572-4455-9078-3ddc8609e127/borlaug-article-1.jpg__1000x567_q85_crop_subsampling-2.jpg'></img><figcaption id='img-caption'>Dr. Norman Borlaug basking in the glory of his discoveries</figcaption></div>
  <h3 id='tribute-info'>Dr. Borlaug made advances in the food industry that allowed for a more plentiful harvest of grain, which would help to feed a tremendously greater amount of people. To learn more visit <a href="https://www.nobelprize.org/prizes/peace/1970/borlaug/biographical/" target='_blank' id='tribute-link'>here</a></h3>
</main>
</html>
/* file: styles.css */
img{
  width:max;
  max-width:100%;
  height:auto;
  justify-content:center;
  display:block;
  position:relative;
  text-align:center;
}

Your browser information:

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

Challenge Information:

Tribute Page - Build a Tribute Page

nevermind, figured it out

1 Like

justify-content is used for Flexbox.

text-align is used for align text inside a block.

To center a block (<img> in this case), you have to set margin-left and margin-right of the block to auto, so the block will be margined evenly between the left and the right, which mean it will be centered.

You can use the shorthand version to set margin-left and margin-right for the block.